Question

我试图了解如何使用带线图的数据联接。我看到的大多数示例在我们的数据连接中使用datum（）而不是data（），并且在添加path元素时直接使用line函数进行映射。我认为我们更喜欢在这种情况下使用datum（），因为整个行函数都是一条路径。

不过，要想更多地了解数据联接，我想看看如何使它适用于单个折线图，但是我在下面尝试的代码段似乎确实有效。

我的代码：

var dataset = [50, 80, 40, 30, 20];

var xScale = d3.scaleLinear()
    .domain([0,4])
    .range([0, width]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d, i) { return xScale(i); })
    .y(function(d) { return yScale(d); });

// ** Works just fine, as expected **
// svg.append("path")
//  .datum(dataset)
//  .attr("d", line)
//  .attr("class", "line");

// Does not work
svg.selectAll("path")
    .datum(dataset)
    .enter().append("path")
        .attr("class", "line")
        .attr("d", line);

Answer 1

使用线条的技巧是，您要构建一个单一的svg https://grafana.company.com/，而不是像其他大多数可视化形式（如条形图）那样构建多个单独的svg形状。

因此，您需要一个单个数据项，其中包括行所需的所有点，才能使d3连接逻辑起作用：

path

或者，如果要输入/更新/删除逻辑，请使用最近的（d3.join）[https://github.com/d3/d3-selection#selection_join]模式：

svg.selectAll("path")
   .data([dataset])
   .enter().append("path")
        .attr("class", "line")
        .attr("d", line);

仅在svg.selectAll("path") .data([dataset]) .join( enter => enter.append("path").attr("class", "line"), update => update, exit => exit.remove() ) .attr("d", line); // and other attributes that change on enter/update here已更改的情况下调用enter函数。 [dataset]逻辑在输入和更新时都被调用。

如何对D3折线图使用Enter（数据联接）

1 个答案: