大朱："How to append distinct paths for distinct values?"

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.

现在我想 "draw" 服务 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 "Paths"。

如何将路径附加到 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>

大朱："How to append distinct paths for distinct values?"

D3js: "How to append distinct paths for distinct values?"

pentaho

append

path

d3.js

编辑