0

Im following a tutorial on how to create axis' for d3js graphs and I have become hung up. In the following code, when uncommenting out the code, the first two rectangles in my histogram disappear. Somehow when appending a rew rect it causes two of my data points to disappear.

index.html

<html>
<head>
    <link href="style.css" rel="stylesheet">
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <script>
var data = [3,6,3,9,11,3,9,12,6] //data.length = 9
var max = d3.max(data);

var heightFactor = 50

var barWidth = 20, barPadding = 1;
var margin = {top:10, right:10, bottom:10, left:50};
var graphWidth = data.length * (barPadding + barWidth) - barPadding; 
var totalWidth = margin.left + margin.right + graphWidth; //248
var totalHeight = max*heightFactor + margin.top + margin.bottom;

var newMargin = margin.left -10;

var svg = d3.select("body").append("svg")
    .attr("height", totalHeight)
    .attr("width", totalWidth)
    .append("g");

svg.append("rect")
    .attr("width", totalWidth)
    .attr("height", totalHeight)
    .attr("fill", "white")
    .attr("stroke", "blue")
    .attr("stroke-width", 1);

var graphGroup = svg
   .append('g')
   .attr('transform', 'translate(' + margin.right + ',' + margin.top + ")");

/* this is my problem
graphGroup.append('rect').attr({
    fill: 'rgba(0,0,0,0.1)',
    width: graphWidth,
    height: totalHeight - (margin.bottom + margin.top)
    });
*/

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", barWidth)
    .attr("height", function(d){return d*heightFactor;})
    .attr("fill", "steelblue")
    .attr("x", function(d,i){return i*21})
    .attr("y", function(d){return (max*50 - d*50) + margin.top})

    </script>
</body>
</html>
salty_coffee
  • 631
  • 1
  • 10
  • 22
  • svg.selectAll("rect") - this selects your two previous rects, replace with svg.select(null), you want to make a selection that is empty, as you want to create an element for each item in the data array using an enter selection. If d3.selectAll("rect") selects two existing rects, then the first two items in the data array will be bound to the existing rects and the enter selection will create new elements only for the rest of the data items. See this answer: https://stackoverflow.com/a/16545072/7106086 or this detailed one: https://stackoverflow.com/a/46147232/7106086 – Andrew Reid Oct 31 '17 at 22:15
  • @AndrewReid Or, if you are really really lazy, you can write `selectAll()`, with nothing between the parentheses. – Gerardo Furtado Oct 31 '17 at 22:20
  • @GerardoFurtado, I do like the symbolism of the empty brackets meaning an empty selection - but I was running of text for a comment. That referenced answer of yours is hard to find when you need it. – Andrew Reid Oct 31 '17 at 22:29
  • 1
    @AndrewReid Yes, but there is a problem: the empty brackets looks like a **getter**. That's why I like `selectAll(null)` better. – Gerardo Furtado Oct 31 '17 at 22:32
  • 1
    Since I took part in the conception of the `selectAll(null)`-idiom (see the comments [here](https://stackoverflow.com/a/44301198/4235784)) I feel the urge to be the spoil-sport in this case: `d3.selectAll(null)` will throw an error in v3, which is the version used by OP! `d3.selectAll([])` might come to the rescue, because `d3.selectAll()` and `d3.selectAll("")` will also break. @GerardoFurtado – altocumulus Nov 01 '17 at 12:05
  • @altocumulus are you sure it throws an error? I just tested it, and it seems to work fine: https://jsfiddle.net/0q0sw8of/1/ – Gerardo Furtado Nov 01 '17 at 12:12
  • @GerardoFurtado *"Uncaught TypeError: Array.prototype.slice called on null or undefined"*: http://jsfiddle.net/74f4pazk/ – altocumulus Nov 01 '17 at 12:14
  • @GerardoFurtado `d3.selectAll()` is causing trouble, not `selection.selectAll()`. But, I get your point: OP is using the latter. I will delete these comments as they do not directly apply and will further add to the confusion. Just keep it in mind. – altocumulus Nov 01 '17 at 12:15
  • Don't delete them: they are valuable. I'm totally against destroying information. – Gerardo Furtado Nov 01 '17 at 12:19

0 Answers0