d3中嵌套数据的类型节点错误的参数编号 [英] Parameter no of type node error with nested data in d3

问题描述

我知道这里有很多D3嵌套问题和答案，但是我似乎无法弄清楚我的问题是什么.

I know there a are a bunch of D3 nesting question and answers here, but I can't seem to figure out what is going wrong with mine.

前一段时间，我第一次创建嵌套时创建了以下要点:

I created the following gist a while back when I first was working to make sense of nesting:

http://bl.ocks.org/AndrewStaroscik/5686192 .数据位于parentElement变量中:

http://bl.ocks.org/AndrewStaroscik/5686192. The data is in the parentElement variable:

var parentElement = [
  {name: "Path 1", startX: 25, startY: 75, segments: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},
  {name: "Path 2", startX: 25, startY: 125, segments: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
];

以下脚本按预期方式呈现了一系列线段:

The following script renders a series of line segments as expected:

var g = svg.selectAll(".parent")
        .data(parentElement);

var gEnter = g.enter()
        .append("g")
        .attr("class", "parent")
        .attr('transform', function(d) { return 'translate(' + d.startX + ',' + d.startY + ')'; })
        .style('fill', 'none')
        .style('stroke', '#232323');

gEnter.selectAll(".child")
.data(function(d) { 
    console.log(d.segments);
    return d.segments; })
    .enter()
    .append("line")
    .attr('class', 'child')
    .attr('x1', function(d,i) { return lineLength * d; })
    .attr('y1', 0)
    .attr('x2', function(d,i) { return lineLength * (1 + d); })
    .attr('y2', 0);

现在，我正在尝试通过在嵌套中使用对象数组而不是数字数组来扩展它.我修改了数据，如下所示:

Now I am trying to extend this by using an array of objects in the nest rather than an array of numbers. I modified the data as follows:

var parentElement = [
{name: "Path 1", startX: 25, startY: 75, segments: [
    {type: "line", val: 1},
    {type: "line", val: 2},
    {type: "line", val: 3},
    {type: "line", val: 4},
    {type: "line", val: 5},
    {type: "line", val: 6},
    {type: "line", val: 7},
    {type: "line", val: 8},
    {type: "line", val: 9}
    ]},
{name: "Path 2", startX: 25, startY: 125, segments: [
    {type: "line", val: 1},
    {type: "line", val: 2},
    {type: "line", val: 3},
    {type: "line", val: 4},
    {type: "line", val: 5},
    {type: "line", val: 6},
    {type: "line", val: 7},
    {type: "line", val: 8},
    {type: "line", val: 9}
    ]},
];

以及selectAll子部分如下:

And the selectAll child part as follows:

gEnter.selectAll(".child")
.data(function(d) { 
    console.dir(d.segments);
    return d.segments; })
    .enter()
    .append(function(d) { 
        console.log(d.type);
        return d.type; 
    })
    .attr('class', 'child')
    .attr('x1', function(d,i) { return lineLength * d.val; })
    .attr('y1', 0)
    .attr('x2', function(d,i) { return lineLength * (1 + d.val); })
    .attr('y2', 0);

最终目标是能够使用相同的代码将不同类型的多个元素(圆形，正方形，路径等)添加到"g"元素中.

The ultimate goal is to be able to add multiple elements of different types (circles, squares, paths etc) to a "g" element using the same code. So the

.append(function(d) { 
  console.log(d.type);
  return d.type; 
})

在此示例中，

显然不是必需的，但最终将很重要.

is clearly unnecessary in this example, but will be important eventually.

这是完整的无法正常运行的版本: http://bl.ocks.org/AndrewStaroscik/e394056440e603374404

Here is the complete nonfunctioning version: http://bl.ocks.org/AndrewStaroscik/e394056440e603374404

数据结构中的更改如何破坏代码?

How the change in the data structure break the code?

推荐答案

问题是.append()没有采用返回元素名称的函数-您必须将元素名称指定为字符串或返回函数中的DOM元素.因此，在您的情况下，它看起来像这样:

The problem is that .append() doesn't take a function that returns the element name -- you must either specify the element name as a string or return the DOM element from the function. So in your case, this would look like this:

.append(function(d) {
  return document.createElementNS(d3.ns.prefix.svg, d.type);
})

这确实使它适合您的情况，但通常这样做还需要您指定数据中的所有属性，因为不同类型的元素具有不同的属性.如果指定了错误的数据类型，这可能会使您的代码和数据非常混乱，并引入难以调试的错误.

While this does make it work in your case, doing this in general would also require you to specify all the attributes in the data as different types of element have different attributes. This could make your code and data quite messy and introduce hard-to-debug bugs when the wrong kind of data is specified.

坚持使用标准D3方法通常更容易，更安全.您可以通过将数据传递到.data()之前对数据进行过滤来实现相同的目的:

It's usually easier and safer to stick with the standard D3 approach. You can achieve the same thing by filtering the data before passing it to .data():

gEnter.selectAll("line.child")
  .data(function(d) {
    return d.segments.filter(function(e) { return e.type == "line"; });
  })
  .enter()
  .append("line")

，对于其他类型的元素也是如此.

and similarly for other types of elements.

这篇关于d3中嵌套数据的类型节点错误的参数编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！