d_z*_*z90 6 javascript json d3.js
我正在研究一个平行坐标图,d3.js我试图从外部json文件中绘制一些多维数据.
这是json文件中数据的结构:
[
{
"timestamp": 1437571117.035159,
"dimension": 10,
"value": [
{
"value": 0.13347661474528993,
"label": "A"
},
{
"value": 0.8677079004784608,
"label": "B"
},
{
"value": 0.7757451827314333,
"label": "C"
},
{
"value": 0.9614725817942508,
"label": "D"
},
{
"value": 0.5259754037241577,
"label": "E"
}
{
"value": 0.9683208234943124,
"label": "F"
},
{
"value": 0.9256394748794468,
"label": "G"
},
{
"value": 0.8749624261426282,
"label": "H"
},
{
"value": 0.6171642160674041,
"label": "I"
},
{
"value": 0.9933299503850428,
"label": "J"
}
]
}
]
这就是我到目前为止处理域以及图表如何绘制项目数据的方式:
d3.json("json/10dim.json", function(error, data) {
if (error) {return console.log(error)};
x.domain(dimensions = d3.keys(data[2].value).filter(function(d) {
return y[d] = d3.scale.linear()
.domain(d3.extent(data, function(p) { return +p[d]; }))
.range([height, 0]);
}));
etc...
控制台没有给我任何类型的错误,但是图表都没有被绘制,也没有正确标记轴.这是一个的jsfiddle与完整代码,这是参考,我已经使用的代码项目.
你知道如何解决这个问题吗？无论如何,请提前感谢您的回复!
我敢打赌我知道为什么你没有看到任何错误或 HTML：代码是在 DOM 加载之前运行的，即<script>你的代码所在的标签位于<body>标签之前。在任何情况下，由于 JSON 无效，您都会立即遇到错误，但我认为这是一个小示例，真正的 JSON 是有效的。继续，您的 JSON 结构对于这个应用程序来说非常烦人。假设您无法修改 JSON，我建议您按照提供的方式读取它，然后将其稍微转换为以下格式：
[
{
"timestamp": 1437571117.035159,
"dimension": 10,
"A": 0.13347661474528993,
"B": 0.8677079004784608,
"C": 0.7757451827314333,
"D": 0.9614725817942508,
"E": 0.5259754037241577,
"F": 0.9683208234943124,
"G": 0.9256394748794468,
"H": 0.8749624261426282,
"I": 0.6171642160674041,
"J": 0.9933299503850428
}
]
有很多充分的理由说明为什么您要在本示例中执行此操作，但主要是，内置 D3data方法希望直接从中读取键的对象数组。
如果你这样做，这个完整的工作jsfiddle几乎应该是你的复制和粘贴。这个小提琴的一些注释：
<body>标签之前包含了该标签<script>，否则，由于与我上面给出的相同原因，它无法在 Fiddle 中工作。最后，确保在运行 D3 代码之前添加 CSS，否则，您将得到纯黑色图表！
希望这可以帮助！