Javascript 如何将x、y、y0以外的特性附加到d3中的streamgraph图层?
我是d3新手,我一直在尝试自定义Streamgraph示例(): 我遇到了一些问题: 我想为流中的每个层指定一个自定义数据属性(例如,让我们说它是一个名为“类型”的标签),这样当您将鼠标悬停在该层上时,会出现一个弹出框,其中列出了该层的“类型” 当我将数据源输入图形时,我使用以下代码:Javascript 如何将x、y、y0以外的特性附加到d3中的streamgraph图层?,javascript,json,d3.js,stream-graph,Javascript,Json,D3.js,Stream Graph,我是d3新手,我一直在尝试自定义Streamgraph示例(): 我遇到了一些问题: 我想为流中的每个层指定一个自定义数据属性(例如,让我们说它是一个名为“类型”的标签),这样当您将鼠标悬停在该层上时,会出现一个弹出框,其中列出了该层的“类型” 当我将数据源输入图形时,我使用以下代码: vis.selectAll("path") .data(data0) .enter().append("path") 该图似乎只包含以下格式的数据:
vis.selectAll("path")
.data(data0)
.enter().append("path")
该图似乎只包含以下格式的数据:
[
[
{
"x": 0,
"y": 91,
"y0": 1.11
},
{
"x": 1,
"y": 290,
"y0": 1.11
}
],
[
{
"x": 0,
"y": 9,
"y0": 1.11
},
{
"x": 1,
"y": 49,
"y0": 1.11
}
]
]
其中,上面的每个子阵列对应于streamgraph中的一个层
如何将数据传递到允许我为每个层添加额外“类型”属性的图形
基本上,当我引用一个图层的基准时,我可以键入类似于d.type的内容并提取该属性
我最初想出了一个非常粗俗的方法:
[
{
"x": 0,
"y": 9,
"y0": 1.11,
"type": "listings"
},
{
"x": 1,
"y": 49,
"y0": 1.11,
}
]
然后我在图层数据中用d[0]来引用它。键入,但这似乎不是正确的方式。使用,然后用图层的一些附加数据来包装每个图层的数据点。您的数据将如下所示:
[
{
"type": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"type": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
]
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });
堆栈布局如下所示:
[
{
"type": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"type": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
]
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });
只是试了一下就成功了!令人惊叹的!再次感谢迈克!