newbie. Help about brush on grouped bar chart d3.

44 views

Skip to first unread message

Jesus Lujan

unread,

Feb 5, 2018, 3:19:54 PM2/5/18

to d3-js

hi.

I'm newbie and i am making a grouped bar chart with brush but the brush doesn't work.

I don't know what it's failed.

Please, i need help.

Thanks.

The json file is:

[{"unidad":"Personas","codigo":"DEPC20054Z.T","indices":"2002-03-01","exponente":"3.0","observaciones":"594"},{"unidad":"Personas","codigo":"DEPC20054Z.T","indices":"2002-06-01","exponente":"3.0","observaciones":"587"},{"unidad":"Personas","codigo":"DEPC20054Z.T","indices":"2002-09-01","exponente":"3.0","observaciones":"593"}]

I paste the code:

<!DOCTYPE html5>

<head>

<style>

body {

font: 10px sans-serif;

}

g.axis path, g.axis line {

fill: none; stroke:black; shape-rendering:crispEdges;

}

g.brush rect.extent {

fill-opacity:0.2;

}

</style>

</head>

<body>

var periodoSerie = <%=request.getParameter("periodoSerie")%>

var codigoUnidad = <%=request.getParameter("codigoUnidad")%>

var descripcionUnidad = <%=request.getParameter("unidadSerie")%>

var exponenteUnidad = <%=request.getParameter("exponenteUnidad")%>

</script>

var margin = {top: 10, right: 10, bottom: 100, left: 40},

margin2 = {top: 430, right: 10, bottom: 20, left: 40},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom,

height2 = 500 - margin2.top - margin2.bottom;

//Define line colors

var color = d3.scale.category20();

// Date format for the X axis

var parseDate = d3.time.format("%Y-%m-%d").parse;

// x0 is the time scale on the X axis

var main_x0 = d3.scale.ordinal().rangeBands([0, width], .1);

//var mini_x0 = d3.scale.ordinal().rangeRoundBands([0, width], .1);

var x0 = d3.time.scale().range([0, width]);

var x2 = d3.time.scale().range([0, width]);

var main_xZoom = d3.scale.linear().range([0, width]).domain([0, width]);

//var main_xZoom = d3.time.scale().range([0, width]);

// x1 is the portfolio scale on the X axis

var main_x1 = d3.scale.ordinal();

//var mini_x1 = d3.scale.ordinal();

// y is the fix time scal on the Y axis

var main_y = d3.scale.linear().range([height, 0]);

var mini_y = d3.scale.linear().range([height2, 0]);

var main_xAxis = d3.svg.axis().scale(x0).orient("bottom"),

mini_xAxis = d3.svg.axis().scale(x2).orient("bottom"),

main_yAxis = d3.svg.axis().scale(main_y).orient("left");

// Define main svg element in #graph

var svg = d3.select("#graph").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

var main = svg.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//var mini = svg.append("g")

// .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

* Pull in the data

function render(nombreSerie,periodoSerie, codigoUnidad, exponenteUnidad) {

d3.json("/lineasD3/graficoD3Servlet", function(error, data) {

var data = data.filter(function(d) {

return (d.codigo == nombreSerie);

});

//Se da formato fecha al campo indices

data.forEach(function(d) {

d.indices = parseDate(d.indices);

if (exponenteUnidad === -1)

d.observaciones = (parseInt(d.observaciones))* Math.pow(10,exponenteUnidad);

else

d.observaciones = (parseInt(d.observaciones));

//d.observaciones = parseInt(d.observaciones);

});

//Se agrupa por fecha.

var data2 = d3.nest()

.key(function(d) {

return d.indices;

})

.entries(data);

var data3 = d3.nest()

.key(function(d) {

return d.codigo;

})

.entries(data);

// define the axis domains

var indiceGroup = data.map(function(d) { return d.indices; });

var codigoNames = data.map(function(d) { return d.codigo; });

/*x0.domain(d3.extent(data, function(d) { return d.indices; }));

x2.domain(d3.extent(data, function(d) { return d.indices; }));*/

var indiceMaximo = d3.max(data2, function(c) { return d3.max(c.values, function(v) { return v.indices; }); });

x2.domain(d3.extent(data, function(d) { return d.indices; }));

if (periodoSerie === 2)

// x0.domain([parseDate((new Date().getFullYear() -2) +'-01-01'),d3.max(function(v) { return v.indices; })]);

x0.domain([parseDate((indiceMaximo.getFullYear() -2) + "-0" + (indiceMaximo.getMonth() +1) + "-0"+ (indiceMaximo.getDate())),

d3.max(data2, function(c) { return d3.max(c.values, function(v) { return v.indices; }); }) ]);

else if (periodoSerie===1)

x0.domain([parseDate((indiceMaximo.getFullYear() -1) + "-0" + (indiceMaximo.getMonth() +1) + "-0"+ (indiceMaximo.getDate())),

d3.max(data2, function(c) { return d3.max(c.values, function(v) { return v.indices; }); }) ]);

//x0.domain([parseDate((new Date().getFullYear() -1) +'-01-01'),d3.max(function(v) { return v.indices; })]);

else

x0.domain(d3.extent(data, function(d) { return d.indices; }));

main_x0.domain(indiceGroup);

main_x1.domain(codigoNames).rangeBands([0, main_x0.rangeBand()]);

//mini_x0.domain(indiceGroup);

//mini_x1.domain(codigoNames).rangeRoundBands([0, mini_x0.rangeBand()]);

var minY = d3.min(data2, function(c) { return d3.min(c.values, function(v) { return v.observaciones; }); });

var maxY= d3.max(data2, function(c) { return d3.max(c.values, function(v) { return v.observaciones; }); });

main_y.domain([minY,maxY]);

mini_y.domain(main_y.domain());

// Create brush for mini graph

var brush = d3.svg.brush()

.x(x2)

.on("brush", brushed);

// Add the X axis

main.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(main_xAxis);

// Add the Y axis

main.append("g")

.attr("class", "y axis")

.style('opacity','1')

.call(main_yAxis);

// Create the bars

var bar = main.selectAll(".bar")

.data(data2)

.enter().append("g")

.attr("class", "g")

.attr("transform",function(d) { return "translate(" + main_x0(d.key) + ",0)"; });

bar.selectAll("rect")

.data(function(d) { return d.values; })

.enter().append("rect")

.attr("width", main_x1.rangeBand())

.attr("x", function(d) { return main_x1(d.codigo); })

.style("fill", function(d) { return color(d.codigo) })

.attr("y", function(d) {

if (d.observaciones > 0){

return main_y(d.observaciones);

} else {

return main_y(0);

}

})

//.attr("height", function(d) { alert(d.observaciones);return main_y(d.observaciones)- height;})

.attr("height", function(d) {

return Math.abs(main_y(d.observaciones) - main_y(0));

})

.on("mouseover", function(d) {

d3.select(this).style("fill", d3.rgb(color(d.codigo)).darker(2));

})

.on("mouseout", function(d) {

d3.select(this).style("fill", color(d.codigo));

});

//linea abajo

var context = svg.append("g")

.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

var contextlineGroups = context.selectAll("g")

.data(data3)

.enter().append("g");

var line2 = d3.svg.line()

.defined(function(d) { return !isNaN(d.observaciones); })

.interpolate("cubic")

.x(function(d) {return x2(d.indices); })

.y(function(d) {return mini_y(d.observaciones); });

var contextLines = contextlineGroups.append("path")

.attr("class", "line")

.attr("d", function(d) { return line2(d.values); })

.style("stroke", function(d) {return color(d.key);})

.attr("clip-path", "url(#clip)");

context.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height2 + ")")

.call(mini_xAxis);

context.append("g")

.attr("class", "x brush")

.call(brush)

.selectAll("rect")

.attr("y", -6)

.attr("height", height2 + 7);

// modificado

function brushed() {

x0.domain(brush.empty() ? x2.domain() : brush.extent());

var originalRange = x2.domain();

main_xZoom.domain(brush.empty() ?

originalRange:

brush.extent() );

main_x0.rangeBands( [main_xZoom(originalRange[0]),main_xZoom(originalRange[1])]);

main_x1.rangeBands([0, main_x0.rangeBand()]);

bar.selectAll("rect")

.attr("transform", function (d) {

return "translate(" + main_x0(d.indices) + ",0)";

})

//.enter().append("rect")

.attr("width", main_x1.rangeBand())

.attr("x", function(d) { return main_x1(d.codigo); })

.style("fill", function(d) { return color(d.codigo) })

.attr("y", function(d) { return main_y(d.observaciones); })

.attr("height", function(d) { return height - main_y(d.observaciones); })

main.select("g.x.axis").call(main_xAxis);

}

})

}

//render(nombreSerie,periodoSerie,codigoUnidad,exponenteUnidad);

render("DEPC20054Z_SM.T", 0, "Personas", -1);

</script>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages