Question

我有一个数据模型，它是一个具有开始时间和结束时间的对象数组。现在我想用它渲染甘特图类型的购物车。

很容易绑定数据并用它渲染一行：

chart.data(myDataList).enter().append("line")
                              .attr("x1", function(d){return d.x})
                              .attr("y1", lineHeight)
                              .attr("x2", function(d){return d.y})
                              .attr("y2", lineHeight)

数据可能就像

myDataList = [ [start time, end time], 
               [start time 2, end time 2],
               [start time 3, end time 3]]

现在我需要为每个数据项呈现这样的内容：

0 ------------------- 0

这是该行的补充，在该行的两端都会有圆圈。 Circle cx数据将来自d.x和d.y. 但是，我不太确定如何在三个元素中绑定相同的数据元素。

任何帮助？

Answer 1

首先你做的是：

chart.data(myDataList).enter().append("line")
                              .attr("x1", function(d){return d.x})
                              .attr("y1", lineHeight)
                              .attr("x2", function(d){return d.y})
                              .attr("y2", lineHeight)

现在制作圈子

//make inner circle
chart.selectAll(".in").data(dataset).enter()
  .append("circle")
   .attr("class", "in")
  .attr("cx", function(d) {
    return xScale(d[0])
  })
  .attr("cy", function(d) {
    return xScale(d[0])
  })
  .attr("r", 2); 
  //make outer circle      
  chart.selectAll(".out").data(dataset).enter()
  .append("circle")
  .attr("class", "out")
  .attr("cx", function(d) {
    return xScale(d[1])
  })
  .attr("cy", function(d) {
    return xScale(d[0])
  })
  .attr("r", 2);

工作代码here

Answer 2

首先，将行代码缓存在变量中。

 var line=chart.data(myDataList).enter().append("line")
.attr("x1", function(d){return d.x}) 
.attr("y1", lineHeight) 
.attr("x2", function(d){return d.y}) 
.attr("y2", lineHeight)

然后，现在使用变量，我们可以使用与

相同的数据元素添加圆圈

line.append("circle") 
.attr("cx", function(d){return d.x}) 
.attr("cy", lineHeight)
.attr("r", 4);//First circle

现在，第二个圈子......

line.append("circle") 
.attr("cx", function(d){return d.y}) 
.attr("cy", lineHeight) 
.attr("r", 4);//Second circle

D3.JS，如何在同一数据绑定中渲染多个对象？

2 个答案: