D3JS：多嵌套 JSON 数据

Question

这个问题的重点是在 d3JS 中调用 JSON 中的嵌套数据。 As a follow up to this question 由 @meetamit 回答，我现在正在向嵌套 JSON 添加另一层，但脚本 (JS Fiddle Here) 遇到问题：

var svgName;
var mainWidth=300;
data=[
{
    "params": [
        {
            "strokeWeight": 1.3,
            "xyData": [
                {
                    "x0": 0.34827403080754826,
                    "x1": 0.60600737245405589,
                    "x2": 0.72278004152764297,
                    "x3": 0.46504669988113501,
                    "x4": 0.34827403080754826,
                    "y0": 0.41161457968694481,
                    "y1": 0.60527707639332184,
                    "y2": 0.36347025679680034,
                    "y3": 0.16980776009042353,
                    "y4": 0.41161457968694481
                }
            ]
        },
        {
            "strokeWeight": 6.3,
            "xyData": [
                {
                    "x0": 0.19665357021794935,
                    "x1": 0.41914132668202908,
                    "x2": 0.54254880649843318,
                    "x3": 0.32006105003435364,
                    "x4": 0.19665357021794935,
                    "y0": 0.39756094992379476,
                    "y1": 0.56473968639682104,
                    "y2": 0.30919384295958852,
                    "y3": 0.14201510648656224,
                    "y4": 0.39756094992379476
                }
            ]
        }
    ],
    "view": "view0"
}
];

    data.forEach(function(qx){  
        qx.points=[];  //this makes two curves merged into one curve.  I want two separate rectangles       
        qx.params.forEach(function(kv){
            aspect=1.5;
            // qx.points=[]; //this makes one curve
            kv.xyData.forEach(function(d) {             
                for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) {
                    qx.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]);
                }
            });
        });
    });
    var margin = {top: 0, right: 0, bottom: 0, left: 0},    
        width = mainWidth - margin.left - margin.right,             
        height = mainWidth/aspect - margin.top - margin.bottom; 

    svgName= d3.select("body")                                  
        .append("svg")                                      
            .attr("width", width + margin.left + margin.right)  
            .attr("height", height + margin.top + margin.bottom)
        .append("g")                                            
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var line = 
    d3.svg.line() 
    ;

    svgName.selectAll("path")
        .data(data)
        .enter()
        .append("path")
        ;

    svgName.selectAll("path")
        .attr("d", function(d) { return line(d.points); })  
        .style("stroke-width", function(d){return d.strokeWeight;})  //this isn't working.
        .style("fill","none")
        .attr("stroke-linecap","round")
        .attr("stroke-linejoin","round")
        ;

现在我必须在这里遗漏一些明显的东西，但是我无法使用下面的代码将两个 xyData 读取为不同的曲线。笔划宽度也不适用于引用数据。曲线的情况很清楚：两个列表合并为一个列表，这会创建一个连续路径，而不是两个单独的路径。我不确定如何解决笔画宽度问题，因此我将不胜感激。

Answer 1

我没有深入研究结构，但问题似乎是，在顶层，您的数组中只有一个项目。由于您的路径（或路径，碰巧是）附加在svgName.selectAll("path").data(data).enter().append("path")，因此您将为data 中的每个元素生成一个路径，这是一个单元素数组。

如果你想为params中的每个元素生成一个路径，你应该使用svgName.selectAll("path").data(data.params)，因为它有正确数量的元素，或者使用newData = data.params.map(mappingFunction)从data.params创建一个合适的数组，并且然后将其用作您的数据。