Question

在D3.js中，您如何实现以下目标？

selection
    .append('td')
    // if the current datum is X
    .append('a');
    // else
    .append('span');

此外，如果我的数据具有以下结构：

data = [{
    x: {
        id: 1,
    },
    y: {
        members: [{
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }]
    }
}, {
    // ...
}, {
    // ...
}]

我将data绑定到ul元素，并且在每个li中，我希望在表中显示每个条目的members。所以基本上

list.append('ul')
list.selectAll('li').data(data).enter().append('li')

，并且每个li

li.append('table')
table.data(function(d) { return d.y.members; })

其中d是data的条目。

现在如何实现第一个问题（条件为x.id === members.id）中描述的内容？孩子应该如何访问父母的数据？

Answer 1

查看选择呼叫https://github.com/d3/d3-selection#selection_call 您可以定义一个函数，并根据您的参数可以追加和修改选择

function modify(selection, param) {
  if(param === "something"){
      selection
         .append("rect")
         .attr("width", 100)
         .attr("height", 100)
         .attr("x", 100)
         .attr("y", 100)
  }else{
       selection
         .append("text")
         .text("NOTHING")
         .attr("y", 100)
         .attr("x", 100)

  }
}

d3.select("svg").call(modify, "something")
d3.select("svg").call(modify, "")

有条件地用D3.js附加HTML元素的正确方法是什么？

1 个答案: