编辑

Question

我有一个行数据集：

-------------------------------------
service | timestamp           | value
-------------------------------------
4       | 2019-01-15 xx:xx:xx | 14
-------------------------------------
4       | 2019-01-15 xx:xx:xx | 14  
-------------------------------------
8       | 2019-01-15 xx:xx:xx | 18  
-------------------------------------
8       | 2019-01-15 xx:xx:xx | 18 
-------------------------------------
etc.

现在，我要为服务4和8“绘制”单行。

我添加了一个过滤器：

var servData = data.filter(function(d) {
    return d.service == 4
});

...

svg.append("path")
 .datum(servData) 
 .attr("class", "line") 
 .attr("d", line);

如果我为每个唯一的服务编写一个过滤器并附加一个，这将起作用。但我想动态地添加服务。

例如：服务有2到5个不同的值

为每个唯一的服务编号附加2到5个“路径”。

如何将路径附加到svg图形

是否不附加每个经过硬编码的服务？

谢谢。

Answer 1

签出general update pattern

var paths = svg.selectAll('path')
  .data(pathsData)

var pathsEnter = paths.enter()
  .append('path')
  .attr("class", "line") 
  .attr('d', line)

编辑

根据您在评论中分享的图片

计算所有service值的唯一数组。（在您的示例中，它是[4, 8]，但它是数据驱动的。）
然后使用该数组作为一组service lines的数据。
根据您的yScale定位每行。
奖金：创建一个色标来根据服务值数组中的值动态确定线条的笔触颜色。

const data = [{service: 4, otherData: '...'},{service: 4, otherData: '...'},{service: 8, otherData: '...'},{service: 8, otherData: '...'},{service: 12, otherData: '...'},{service: 12, otherData: '...'}
]

// Get a unique array from data
const serviceData = Array.from(new Set(data.map(a => a.service)));

// create a color scale if you need
const color = d3.scaleLinear().domain(serviceData).interpolate(d3.interpolateHcl).range([d3.rgb("#ff0000"), d3.rgb('#257c00')]);

const width = 500;
const height = 300;
const svg = d3.select('body').append('svg').attr('width', width).attr('height', height)

// Bind to data
const lines = svg.append('g').attr("class", "service-lines-group").selectAll('line')
  .data(serviceData)

// Enter selection - create lines for each data point
const linesEnter = lines.enter()
  .append('line')
  .attr("class", "service-line")
  .attr('x1', 0)
  .attr('x2', width)
  .attr('y1', d => d * 10)
  .attr('y2', d => d * 10)
  .attr('stroke', (d, i) => {
    return color(d)
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

D3js：“如何为不同的值附加不同的路径？”

1 个答案:

编辑