使用 D3 的路径生成器。如何为他们分配数据？

Posted 2023-02-22

【中文标题】使用 D3 的路径生成器。如何为他们分配数据？

【英文标题】：Using D3's path generators. How to assign data to them?

【发布时间】：2016-05-01 12:44:15

【问题描述】：

我目前正在尝试使用 D3.js 实现折线图

D3 文档包含以下示例：

var line = d3.svg.line()
    .x(function(d)  return d.x; )
    .y(function(d)  return d.y; )
    .interpolate("basis");

g.append("path")
    .attr("d", line);

... 并说“绑定到 g 的任何数据（在此示例中）都将传递给 line 实例。”

“边界数据”是什么意思？

我有以下有效的代码：

var lineGen = d3.svg.line()
                 .x(function(d, i) 
                    return xScale(i);
                 )
                 .y(function(d) 
                    return HEIGHT - yScale(d);
                 )
                 .interpolate('basis');
    var lineVal = lineGen(data);

    svg.append('path').attr('d', lineVal)
                      .attr(
                        'fill': 'none',
                        'stroke': 'black',
                        'stroke-width': '3'
                      );

使用 lineGen(data) 我生成一个字符串。然后我将此字符串分配给 attr-setter。

但是官方文档中解释的方式是行不通的。

如何将我的数据直接绑定到 SVG 元素？

svg.data(data) 不起作用。我已经试过了。

更新

我在教程中找到了解决方案。

// Data-structure. In this case an 
//   one-dimensional array.
var data = [ 22, 31, 29, 32, 21, 38, 30 ];

svg.append('path')
    // Assign the data-structure as ONE
    //   element an array-literal.
    .data([data])
    .attr('d', lineGen)
    .attr(
      'fill': 'none',
      'stroke': 'black',
      'stroke-width': '3'
    );

通过将数据结构分配为数组文字的元素 整个数据绑定到一个元素。

这种技术的替代方法是使用 selection.datum()。 https://github.com/mbostock/d3/wiki/Selections#datum

【参考方案1】：

在 d3 中，数据与选择项绑定。您可以使用进入和退出选择来为传入数据创建新节点并删除不再需要的传出节点。

在您的示例中，您应该尝试如下所示。

var line = d3.svg.line()
    .x(function(d)  return d.x; )
    .y(function(d)  return d.y; )
    .interpolate("basis");

g.selectAll("path") //Selects all the elements that match the specific selector, here elements having path tag
    .data(data)  //The data operator joins the specified array of data with the current selection.
    .enter() //The enter selection contains placeholders for any missing elements. Here it has placeholders for n path elements where n is the length of data array.
    .append("path") //For each placeholder element created in the previous step, a path element is inserted.
    .attr("d", line); //The first param of line function would be the data (corresponding array element) bond to the current path element. And the second param is the data index.

要了解有关 d3 中数据绑定的更多信息，请参阅：Binding-data-to-dom-elements。

编辑： 要创建具有数据绑定的单个路径元素，请尝试如下所示。

g.append("path")
 .datum(dataObj) //Where dataObj is data[i]
 .attr("d", line);

【讨论】：

非常感谢您的努力。对此，我真的非常感激。但肯定还有别的东西......假设我有一个包含六个元素的数组。 enter() 给出了六个路径元素，这些元素将在以下步骤中附加。 Firebug 控制台：

但是为了构造一个行，需要一个具有 d 属性的路径元素：svgbasics.com/paths.html 数组中的数据必须放入 d 属性的值中。