我试图在这里绘制一个非常基本的图表。我想要实现的目标有点像这样:
每个“子图”包含 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; })
根据文档/教程,我希望它创建一个分割,但它似乎完全忽略 .selectAll(".chart__graph") 。
如果我手动.append()
div,那么它会为每个不需要的运行创建分割。
为了实现我想要的 div 结构,我缺少什么?
另外,selectAll()
实际上做了什么?
请不要介意重复的代码,暂时让我了解 D3.js 语法。
最佳答案
您必须在 Enter 中附加带有类 chart__graph
的 div
,然后创建子 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")
...
关于javascript - d3.js 创建和输入元素的意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34131961/