D3.JS，如何在同一数据绑定中呈现多个对象

D3.JS, How can I render multiple objects in the same data binding?

本文关键字：对象 数据绑定 JS D3      更新时间：2023-09-26

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

很容易绑定数据并用它呈现一行：

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]]

现在，我需要用每个数据项呈现这样的东西：

O--------------------O

这是除了这条线之外，这条线的两端都会有一个圆圈。圆cx数据将来自d.x和d.y。但是，我不太确定如何将同一个数据元素绑定到三个元素中。

有什么帮助吗？

首先制作行：

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);

此处的工作代码

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

 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
相关文章：