d3.js意想不到的行为创建和输入元素

我想在这里绘制一个非常基本的图。我想要实现的有点像这样：d3.js意想不到的行为创建和输入元素

每个“子图”包含4个数据点。

所需的结构是：

.chart 
    .chart__graph 
    .chart__graph__exp1 
    .chart__graph__exp2 
    .chart__graph__opt 
    .chart__graph__min 
    .chart__graph 
    .chart__graph__exp1 
    .chart__graph__exp2 
    .chart__graph__opt 
    .chart__graph__min 
    .chart__graph 
    ....

这是我的方法：

var data = [ 
     { 
      minimum: 4, 
      optimum: 7, 
      company: 6, 
      competitor: 6 
     }, 
     { 
      minimum: 2, 
      optimum: 4, 
      company: 4, 
      competitor:3 
     }, 
     { 
      minimum: 3, 
      optimum: 7, 
      company: 6, 
      competitor: 3 
     } 
    ] 

    d3.select(".chart").selectAll(".chart__graph") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__min").html(function(d) { return d.minimum; }); 
    d3.select(".chart").selectAll(".chart__graph") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__exp1").html(function(d) { return d.company; }) 
    d3.select(".chart").selectAll(".chart__graph") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__exp2").html(function(d) { return d.competitor; }) 
    d3.select(".chart").selectAll(".chart__graph") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__opt").html(function(d) { return d.optimum; })

根据文档/教程我希望它来创建一个subdiv，但似乎忽略.selectAll（ “.chart__graph”）完全。如果我手动使用div .append()，则会为每个不希望的运行创建细分。我错过了什么来达到我想要的div结构？另外，selectAll()实际上做了什么？

请不要介意重复的代码，现在试图绕过D3.js语法。

来源

2015-12-07 Seltsam

您必须在类别div中添加类chart__graph，然后创建子div。

var chart_graph_ent = d3.select(".chart").selectAll(".chart__graph") 
    .data(data) 
    .enter() 
    .append("div").attr("class", "chart__graph") 
chart_graph_ent.append("div").attr("class", "chart__graph__min") 
...

来源

2015-12-07 11:21:17

这正是我正在寻找的！谢谢！ – Seltsam

取而代之的是：

d3.select(".chart").selectAll(".chart__graph")//this is a wrong selection 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__opt")

应该已经

d3.select(".chart").selectAll(".chart__graph__opt") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__opt")

这是什么呢：

1）d3.select(".chart") //this will select the DOM with class chart

2）d3.select(".chart").selectAll(".chart__graph__opt")

这将返回选择范围chart__graph__opt中类别为".chart"的所有元素。最初这将是空的选择。

3）

//to this selection set the data and call enter 
    d3.select(".chart").selectAll(".chart__graph__opt") 
       .data(data) 
       .enter()

4）

d3.select(".chart").selectAll(".chart__graph__opt") 
     .data(data) 
     .enter() 
     .append("div").attr("class", "chart__graph__opt")

在数据设定新的div每个数据将与类 “chart__graph__opt”（同选择）被附加。

希望这可以解决一些问题。

来源

2015-12-07 11:23:46 Cyril

谢谢，这是最容易遵循的。不幸的是，child-div（“.chart__graph__opt”）现在不会显示在其父容器（“.chart__graph”）中，而是紧挨着对方。你可以调整你的例子吗？ – Seltsam

-1

“selectAll”通过标记名称“.chart_graph”选择节点，d3尝试在“.chart”对象中附加新节点。

来源

2015-12-07 11:33:24 Faldict

d3.js意想不到的行为创建和输入元素

回答

相关问题