带有画笔滑块的d3js条形图

Question

通过查看下面的示例http://bl.ocks.org/mbostock/4349545 ，我试图用条形图代替这些圆圈，这些条形图代表每天发生的事件，具有两年的数据价值。 数据是格式

 {"15/01/2015: 214","22/03/2016: 30",..}

有人可以指出正确的方向吗？

谢谢！

Answer 1

您可以通过与新的数据交换数据来获得条形图：

var data = [{ "date" : "15/01/2015", "value" : 214}
        ,{ "date" : "22/03/2016", "value" : 30}]

解析日期 ，将x轴更改为datetime，然后在该位置将圆的类型更改为Rect（具有新属性等）：

var circle = svg.append("g").selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; })
.attr("r", 3.5);

但是，你带来的类型矩形的所有元素brushg使用全选，所以这将是在新的办法冲突的例子。