score:1

Accepted answer

You can make line instead of rectangle as pointed by Anko. Here is how you can make a line:

  svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("line")
    .attr('stroke', '#363636')
    .attr('x1', function(d, i) {
      return (i + 1) * 10;//xposition of line
    })
    .attr('x2', function(d, i) {
      return (i + 1) * 10;
    })
    .attr('y1', function(d, i) {
      return 10;//starting point of line
    })
    .attr('y2', function(d, i) {
      if (d) {
        return 0; //if 0 then line should be below
      } else {
        return 20;//if non 0 then line should be above
      }
    })

working example here

Hope this helps!

score:1

If you want to make the chart scaleable, so the positions are correct for any height:

svg.selectAll("rect")
    .data(dataset)
.enter()
.append("rect")
    .attr('fill', '#363636')
    .attr('rx', '1')
    .attr('ry', '1')
.attr("x", function(d, i) {
  return i * 3;
})
.attr("y", function(d) {
  return d ? h / 2 : 0;
})
.attr("width", 1) // width of bar
.attr("height", function(d) {
    return h/2;
});

Related Query

More Query from same tag