Databases
StackOverflow2013
Postsdbo
POAppending lines to D3 bar chart - absolutely nothing happens
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAppending lines to D3 bar chart - absolutely nothing happens
    text
    copied!<p>I have an otherwise fine working grouped bar chart script to which I'm trying to add simple reference lines. The relevant code:</p> <pre><code>//Set up margins and dimensions according to http://bl.ocks.org/3019563 var margin = {top: 20, right: 10, bottom: 20, left: 30}, width = 810 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; /* Set up the primary x scale */ var x0 = d3.scale.ordinal() .rangeRoundBands([0, width], .1) .domain(data.map(function (d) { return options.xPrimaryScaleAccessor(d); })); /* Set up the secondary x scale */ var x1 = d3.scale.ordinal() .domain(xSecondaryScaleValues) .rangeRoundBands([0, x0.rangeBand()]); /* Set up the y scale as a linear (continous) scale with a total range of 0 - full height and a domain of 0-100 */ var y = d3.scale.linear() .range([height, 0]) .domain([0, 100]); /* Set up a color space of 20 colors */ var color = d3.scale.category20(); /* Set up the x axis using the primary x scale and align it to the bottom */ var xAxis = d3.svg.axis() .scale(x0) .orient("bottom"); /* Set up the y axis using the y scale and align it to the left */ var yAxis = d3.svg.axis() .scale(y) .orient("left"); /* Create an SVG element and append it to the body, set its dimensions, append a &lt;g&gt; element to * it and apply a transform translating all coordinates according to the margins set up. */ var svg = d3.select(options.target).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Create a space for definitions var defs = svg.append("defs"); setupDropShadowFilter(defs, 3, 3, 3); //Sets up a gaussian blur filter with id 'drop-shadow' /* Append a &lt;g&gt; element to the chart and turn it into a representation of the x axis */ svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); /* Append a &lt;g&gt; element to the chart and turn it into a representation of the y axis */ svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text(options.yLabel); var dataArr = y.ticks(yAxis.ticks()); /* Draw the reference lines */ svg.selectAll("line") .data(dataArr) .enter().append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", y) .attr("y2", y) .style("stroke", "#ccc"); /* Set up the bar groups */ var group = svg.selectAll(".group") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0(options.xPrimaryScaleAccessor(d)) + ",0)"; }); /* Draw the bars */ group.selectAll("rect") .data(options.valueAccessor) .enter().append("rect") .attr("width", x1.rangeBand()) .attr("x", function(d) { return x1(d.label); }) .attr("y", function(d) { return y(d.value); }) .attr('rx', options.barCornerRadius) .attr('ry', options.barCornerRadius) .attr("height", function(d) { return height - y(d.value); }) .style("fill", function(d) { return getStripedPattern(defs, color(d.label)); //Sets up a pattern and returns its ID })//Todo: fill with pattern instead. see http://tributary.io/tributary/2929255 .style("filter", "url(#drop-shadow)"); /* Draw a legend */ var legend = svg.selectAll(".legend") .data(xSecondaryScaleValues) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + (xSecondaryScaleValues.length-i-.25) * (height/xSecondaryScaleValues.length) + ")"; }); legend.append("rect") .attr("x", width - 9) .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .attr("y", 9) //.attr("dy", ".35em") .attr("transform", "translate(" + (width - 6) + ",-8)rotate(-90)" ) .style("text-anchor", "start") .text(function(d) { return d; }); </code></pre> <p>EDIT: I have also tried to append <code>rect</code> elements instead with hardcoded coordinates and dimensions, but those also didn't make it to the DOM.</p> <p>EDIT 2: More or less full code now included.</p> <p>Basically, nothing happens. No lines are appended and there are no errors in the console. The dataArr is a plain array of numbers and <code>y(number)</code> is confirmed to return good values in the output range.</p> <p>I think (and debug suggests) that the chain dies at the <code>append()</code> stage, possibly because <code>.enter()</code> return something useless.</p> <h3>Console log after <code>.data()</code>:<br></h3> <p><img src="https://i.stack.imgur.com/OTYMB.png" alt="Console log after .data()"><br></p> <h3>Console log after <code>.enter()</code>:<br></h3> <p><img src="https://i.stack.imgur.com/hyCWw.png" alt="Console log after .enter()"></p> <h3>Console log after <code>.append()</code>:<br></h3> <p><img src="https://i.stack.imgur.com/O3Js5.png" alt="Console log after .append():"></p> <p>I've been stuck on this for a good while now, so grateful for any ideas about what may go wrong. I'm sure I'm overlooking something obvious...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload