d3.js - Complex data object with duplicate 'values' = missing chart bars -
i'm not sure if d3 bug or if i'm doing wrong. take @ following:
http://jsfiddle.net/jakobud/sfwjb/6/
var data = [ { value: 20, color: 'red' }, { value: 30, color: 'blue' }, { value: 30, color: 'purple' } // same value 2nd object ]; var w = 140, h = d3.max(data, function(d){ return d.value; }) + 30, barpadding = 4, toppadding = 1, bottompadding = 20; var svg = d3.select('#chart') .append('svg:svg') .attr('width', w) .attr('height', h); var rects = svg.selectall('rect') .data(data, function(d){ console.log(d); return d.value; }) // 3 objects found here .enter() .append('rect') .attr('x', function(d,i){ console.log(i); return * w / data.length + 1; }) // last data object ignored, not placed @ .attr('y', function(d){ return h - d.value - toppadding - bottompadding }) .attr('width', w / data.length - barpadding - 3 ) .attr('height', function(d) { return d.value }) .attr('fill', function(d) { return d.color }) .attr('stroke', '#333') .attr('stroke-width', 2); text = svg.selectall('text') .data(data, function(d){ return d.value; }) .enter() .append('text') .text(function(d){ return d.value; }) .attr('x', function(d,i){ return * w / data.length + 20; }) .attr('y', function(d,i){ return h - 0; }) .attr("text-anchor", "middle") .attr("font-size", "20px") .attr("fill", "#333"); you can see in data objects, 2nd , 3rd objects have same "value".
when svg rects being created, 3rd data object ignored , result, not placed in chart. if change value of 3rd object 30 31 or else, can see bar show then. since it's same 2nd object's value, doesn't show up.
why this? how prevent this? in code here cause this? rects.data() function see's 3 objects, can see console.log() added function.
the way in matching data existing data causing problem, in particular line
.data(data, function(d){ return d.value; }) this tells d3 consider 2 data objects same if value attribute same. , case second , third objects, hence first added. if want both, can either omit function tells d3 how compare data objects (and rely on default behaviour of matching array index), or change function take e.g. color account well.
just summarise, seeing not bug, feature :) behaviour entirely expected , wanted.
Comments
Post a Comment