Question

我遇到了一个问题：当我使用相同的绘图函数动态创建多个行时，行具有绑定，就好像它们的所有点都只属于一行一样。我试过：设置不同的类，不同的id，我把它们放到不同的组中，我尝试使用不同的函数实例，尝试使用.append，.enter.append。但效果是一样的。我非常感谢你帮助解决这个问题。

以红色突出显示的行是不需要的粘贴：click me。

Here jsfiddle。我试图尽可能地减少代码。重现效果的步骤：点击“添加”，点击“播放”，如果图表已更改，请点击暂停，然后点击“添加”。

/* added lines */
/***************/
    line_added = d3.svg.line()
        .interpolate("monotone")
        .defined(function(d) { 
            if($.inArray(d.z, all_z_added)!=-1) 
            {
                if(!d.predicted)
                    return y(d.y); 
            };
        })
        .x(function(d) {return x(d.x);})
        .y(function(d) {return y(d.y);});


    p_line_added = d3.svg.line()
        .interpolate("monotone")
        .defined(function(d, i) { 
            if($.inArray(data[i].z, all_z_added)!=-1)
            {
                if(data[i].predicted)
                {
                    return y(data[i].y); 
                }
                else
                {
                    if(data[i+1]!=undefined && data[i-1]!=undefined)
                    {
                        if(!data[i].predicted && data[i+1].predicted)
                            return y(data[i].y); 
                    }
                };
            };
        })
        .x(function(d) {return x(d.x);})
        .y(function(d) {return y(d.y);});


function recreate_added()
{
    svg.selectAll(".line_added").remove(); 
    svg.selectAll(".p_line_added").remove();  

    // var all = svg.selectAll("line").data([data], function(d) { return d});

    for(var k in all_z_added)
    {


        svg.append("path")
        .data([data])     
        .attr("class", "line_added line_added" + all_z_added[k] )
        .attr("id", "al" + all_z_added[k] )
        .style('fill', 'none')
        .attr("d", line_added);   

        svg.append("path")
        .data([data])
        .attr("class", "p_line_added p_line_added" + all_z_added[k] )
        .attr("id", "apl" + all_z_added[k] )
        .style('fill', 'none')
        .attr("d", p_line_added); 

    //     all.enter().append("path")
    //     .attr("class", "line_added line_added" + all_z_added[k] )
    //     .attr("id", "al" + all_z_added[k] )
    //     .attr("d", line_added);   

    //     all.enter().append("path")
    //     .attr("class", "p_line_added p_line_added" + all_z_added[k] )
    //     .attr("id", "apl" + all_z_added[k] )
    //     .attr("d", p_line_added); 

        // svg.append("g")
        // .attr("class", "line_added g" + all_z_added[k] )
        // .attr("id", "g" + all_z_added[k] )

        //     .append("path")
        //     .data([data])     
        //     .attr("class", "line_added line_added" + all_z_added[k] )
        //     .attr("id", "al" + all_z_added[k] )
        //     .style('fill', 'none')
        //     .attr("d", line_added);   


        // svg.append("g")
        // .attr("class", "line_added pg" + all_z_added[k] )
        // .attr("id", "pg" + all_z_added[k] )

        //     .append("path")
        //     .data([data])
        //     .attr("class", "p_line_added p_line_added" + all_z_added[k] )
        //     .attr("id", "apl" + all_z_added[k] )
        //     .style('fill', 'none')
        //     .attr("d", p_line_added); 
    }
}

Answer 1

请你创建一个jsfiddle（输入你的Html，Css和d3 / jquery数据）来检查发生了什么？

我猜你不应该使用interpolate函数和'基础'，用这些'绑定'来绘制B-Splines。看一下：d3 documentation here。另外，尝试删除interpolate功能。 x和y函数应该足够了。

d3中不需要的绑定线（动态创建）

1 个答案: