D3.js D3更新选择不更新文本_D3.js

D3.js D3更新选择不更新文本

d3.js

D3.js D3更新选择不更新文本,d3.js,D3.js,在下面的代码中，我试图更新d3随类person添加的新添加的p元素。我试图说明d3将为超过页面上已有元素数量的数据点添加新的p元素。我使用的是D3版本5.7.0 D3添加了新的p元素，但不会将person类添加到新的p元素中。仅适用于已存在的图元 <!DOCTYPE html> <html> <head> <title></title> <script src="d3/d3.min.js"&

在下面的代码中，我试图更新d3随类person添加的新添加的p元素。我试图说明d3将为超过页面上已有元素数量的数据点添加新的p元素。我使用的是D3版本5.7.0

D3添加了新的p元素，但不会将person类添加到新的p元素中。仅适用于已存在的图元

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="d3/d3.min.js"></script>
        <style>
            p {
                background: black;
                color: white;
                font-size: 30px;
                width: 150px;
                margin: 20px;
                padding: 10px;
            }
            .person {
                background: indigo;
                color: deeppink;
                font-size: 30px;
                width: 150px;
                margin: 20px;
                padding: 10px;
            }
        </style>
    </head>
    <body>

        <!-- no of elements = no of data points (update selection) -->
<!--         <p>Chair 1</p>
        <p>Chair 2</p>
        <p>Chair 3</p>
        <p>Chair 4</p> -->

        <!-- no of data points > no of elements (enter selection) -->
        <p>Chair 1</p>
        <p>Chair 2</p>
        <p>Chair 3</p>
        <p>Chair 4</p>

        <script>
/*             var myData = ["Person 1", "Person 2", "Person 3", "Person 4"];

            d3.selectAll("p").data(myData)
                .text(function(d){return d;})
                .classed("person", true); */

            var myData = ["Person 1", "Person 2", "Person 3", 
            "Person 4", "Person 5", "Person 6"];

            var update = d3.selectAll("p").data(myData);

            update.enter().append("p");

            update.text(function(d) { return d; }).classed("person", true);

        </script> 

    </body>
</html>


p{
背景：黑色；
颜色：白色；
字体大小：30px；
宽度：150px；
利润率：20px；
填充：10px；
}
.人{
背景：靛蓝；
颜色：深粉色；
字体大小：30px；
宽度：150px；
利润率：20px；
填充：10px；
}
主席1
主席2
主席3
主席4
/*var myData=[“第1人”、“第2人”、“第3人”、“第4人”]；
d3.选择全部（“p”）.数据（myData）
.text（函数（d）{return d；}）
.分类（“人”，真实）*/
var myData=[“个人1”、“个人2”、“个人3”，
“第四人”、“第五人”、“第六人”]；
var update=d3.选择全部（“p”）.数据（myData）；
update.enter（）.append（“p”）；
text（函数（d）{return d；}）.classed（“person”，true）；

在这里，根据D3的解决方案更新选择包含选择时存在的元素-它不包括输入的元素，因为它们在选择时不存在（您的更新选择为空）。您需要在输入选择中使用.classed，或者使用selection.merge（）。此行为与v3中的不同。这个答案可能会有所帮助：d3v3在这方面有不同的行为，事实上，您的小提琴应该在没有任何预先存在的p标记的情况下工作：是的，刚刚得到它。上面的代码不起作用的原因可能是什么。在v3中，enter选择“神奇地”是更新选择的一部分，在v4+中，它被更改为选择是不可变的，enter选择将保持与更新分离，为了适应这一点，添加了合并方法。问题中的代码与预期的一样：更新选择是空的，因为最初没有选择任何元素，所有内容都在enter选择中。这里是使用合并的地方：

selection=selection.enter（）.merge（selection）

，现在

selection

既包括输入的元素，也包括预先存在的（更新选择元素）元素。我引用“神奇”仅仅是因为博斯托克在评论他为什么改变行为时就是这么说的，下面是，它可能会提供更多的上下文感谢CSMaverick的回复。但你说我至少有一个p标签。我有四个。这是唯一的区别。你的d3代码完全相同，但你的代码有效。你可以澄清一下吗？

var myData = ["Person 1", "Person 2", "Person 3", 
        "Person 4", "Person 5", "Person 6"];

var update = d3.selectAll("p").data(myData);
update.exit().remove(); // EXIT

update.enter().append("p").merge(update).text(function(d) { return d; }).classed("person", true);