Question

我的数组中有6个数据。但是在文档中我只有5个p个元素。所以我决定创建一个新的p元素。

应用样式后，单独应用最后创建的元素。 5 p元素没有应用样式。

我猜错了处理'enter and exit`。有人帮我解决这个问题吗？

这是mycode：

$(function () {

var datas = [
  {"font":15,"color":"green"},
  {"font":18,"color":"blue"},
  {"font":24,"color":"yellow"},
  {"font":36,"color":"orange"},
  {"font":42,"color":"brown"},
  {"font":54,"color":"gray"}
];

  d3.selectAll('p')
    .data(datas)
    .enter().append('p') //it is only getting the style applied
    .text(function(d) { return d.color; })
    .style('font-size', function (d, i){
      return d.font + 'px';
    })
    .style('color', function (d, i){
      return d.color;
    });


})

Live Demo

Answer 1

不应该有任何p DOM，你应该在页面加载后调用脚本（以便数据链接到附加的p DOM）。

这样可以确保加载正文然后执行脚本。

  <body>

        <script src="script.js"></script>
  </body>

工作示例here

希望这有帮助！

修改

问题1：

在加载DOM之后，您必须始终调用脚本函数。在你的小提琴中，你将head.js加载到头部。

问题2：

这将添加数据并创建新的p DOM并将数据关联到已存在的p DOM。

selectDIV.selectAll('p') .data(datas) .enter() .append('p') .text("tello");

这将更新已存在或已创建的所有p DOM。

selectDIV.selectAll("p").style('color', function(d,i){ return d.color })

更正小提琴here

d3js - 最后一个`附加`元素单独应用了样式属性

1 个答案: