Question

我正在使用d3画笔更新我的图表。当我更新图表时，过滤器值更改时，值未正确更新。当我尝试调试circles变量时，会显示[Arr[3] ,Arr[2], Arr[1]]和circles.enter() = [Arr[3] ,Arr[2], Arr[1]]以及circles.exit() = [Arr0 ,Arr0, Arr0]之类的内容。但是，当circles.enter.append()运行时，只会将圆圈中的第一个值添加到图表中。

var create_circles = function(data, color, filter_arr) {
    data = [
        {
            key: "3003",
            values: [
                {
                    key: "0R",
                    values: [
                        {a: '0r1'},
                        {a: '0r2'},
                        {a: '0r3'}
                    ]
                },
                {
                    key: "0G",
                    values: [
                        {a: '0g1'},
                        {a: '0g2'},
                        {a: '0g3'}
                    ]

                }
            ]
        },
        {
            key: "3004",
            values: [
                {
                    key: "0R",
                    values: [
                        {a: '04r1'},
                        {a: '04r2'},
                        {a: '04r3'},
                        {a: '04r4'}
                    ]
                },
                {
                    key: "0G",
                    values: [
                        {a: '04g1'},
                        {a: '04g2'}
                    ]

                }
            ]
        }

    ];
    var LRGroups = d3.selectAll("svg .L, svg .R")
        .data(data);

    var LxRxGroups = LRGroups.selectAll("g").data(function(d){
          return d.values;
        });

    var circles = LxRxGroups.selectAll('circle')
        .data(function(d) {
            if(filter_arr[0] < 50)
                return [d.values[1]]
            else
                return d.values
        },  function(d) {
            console.log(d)
            return d;

        })
    circles.enter().append("circle").attr("r", function(d) {
        console.log(d.a);
        return 1;
    })
    .attr("cx", 1)
    .attr("cy", 1);

    circles.exit().remove();
}

我在里面有一些样本数据来测试它。如果我使用create_cicles(1,2,[50,60])运行该函数，我有以下日志数据..

{a: "0r1"}
{a: "0r2"}
{a: "0r3"}
{a: "0g1"}
{a: "0g2"}
{a: "0g3"}
{a: "04r1"}
{a: "04r2"}
{a: "04r3"}
{a: "04r4"}
{a: "04g1"}
{a: "04g2"}

Log from inside append
0r1
0g1
04r1
04g1

svg结构是使用相同的数据创建的，但在更新之间保持相同。

<svg width="1000" height="800">
    <g transform="translate(80,100)">
        <g class="L">
            <g class="L1"></g>
            <g class="L2"></g>
        </g>
        <g class="R">
            <g class="R1"></g>
            <g class="R2"></g>
        </g>
    </g>
</svg>

我有上面示例中显示的数据集但更大，所以一旦页面加载我循环遍历数组以创建如上所述的svg裸格式。之后，如果我调用create_circles(1,1, [50, 60])，我希望创建上面数据集中的所有值，但我发现每个数组只创建一个元素，即。 or1, og1, o4r1, o4g1。所以我无法理解这背后的原因，因为circles变量显示它包含[3,3,4,2]元素而circles.enter()也显示相同的no和circles.exit()显示{{1} }}。这应该意味着[0,0,0,0]元素被附加到svg，但只添加了4。希望这是有道理的..我附上了整个代码here。上面的3+3+4+2=12稍微修改了文件中的create_circles，以便更容易调试。

d3输入并追加不工作

0 个答案: