javascript - d3 : update dataset not updating the DOM

In lại Tác giả: Walker 123 更新时间：2023-11-28 19:08:25 31 4

var dataSet = [
    { label: 'a', value: 10},
    { label: 'b', value: 20},
    { label: 'c', value: 30},
    { label: 'd', value: 40}
];

var circle = svg.selectAll('circle')
    .data(dataSet)
    .đi vào()
    .append('circle')
    .attr({
        r:function(d){ return d.value },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
    });

dataSet[0].value = 40;
dataSet[1].value = 30;
dataSet[2].value = 20;
dataSet[3].value = 10;

setTimeout(function () {
    var circle = svg.selectAll('circle')
      .data(dataSet, function (d) {
          return d.label;   
      })
     .sort(function (a,b){ return d3.ascending(a.value, b.value);})
     .đi vào()
     .append('circle')
     .attr({
        r:function(d){ return d.value },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
     });
},1000);

svg.selectAll('circle')
.data(dataSet, function (d) {
    return d.label;   
})
.sort(function (a,b){ return d3.ascending(a.value, b.value);})
.transition()
.attr({
    r:function(d){ return d.value },
    cx:function(d, i){ return i * 100 + 50 },
    cy:50,
    fill: 'red'
});

31 4 0

• dom - 哪些因素促使虚拟 DOM 超越浏览器原生 DOM？

  关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve

• dom - polymer : Light DOM vs Local DOM

  Polymer的light DOM和local DOM有什么区别？来自文档(1): The DOM that an element creates and manages is called its

• dom - DOM 突变事件库？

  当内容添加到网页时，我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。 我想使用 DOM 突变事件，但它们并非在所有浏览器中都可用。是否有为

• shadow-dom - 我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗？

  我刚遇到一个有趣的情况，我有一个提交 放置在 内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...

• javascript - 在当前 dom 之前添加 dom，并保持当前 dom 留在视口(viewport)中

  假设有一个滚动列表，当我插入一些新的 DOM 附加到当前 dom 时，它工作正常。上拉 但是如果我之前插入一些新的 DOM，新的 DOM 将在视口(viewport)中，而旧的 DOM 将被下推。下拉

• dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快？

  在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快？ 最佳答案 它们是不同用途的不同事物，因此比较性能没有意义。 虚拟 DOM 虚拟 DOM 旨在避免对

• dom - 从 DOM 中选择元素

  在我的页面内容上，我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |

• dom - 在浏览器中调试自定义 DOM 事件

  是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件？ 假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ，我能以某种方

• dom - 浏览器会自动插入哪些 DOM 元素？

  我正在生成用于客户端的 XPaths 服务器端，我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。 事实证明，现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文

• dom - 检索 DOM 文本节点位置

  是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)？ 最佳答案 不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。 仅在

• dom - 什么是 DOM 元素？

  以下语句中的 DOM 元素的含义是什么？ Statement #1 You can add multiple classes to a single DOM element. Statement #2

• dom - 卡住 Dom 操作

  有没有办法让 firebug(或任何其他浏览器，或使用任何其他工具)阻止任何 dom 操作的发生？有时布局调试充满悬停事件的屏幕是不可能的，因为元素可能会消失，并且您看不到它们的复合布局。 最佳答案

• dom - 我需要元素的完整 dom 节点路径

  我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr

• dom - 页面加载时间中的 DOM 加载时间代表什么？

  这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request

• dom - .on() 未检测到 dom 更改

  我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js，我正在 mouseenter 和 mous

• dom - YUI3 DOM 未定义？

  我是 Javascript 的新手，负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南，所以我现在正在浏览互联网帖子和 yui 文档。 在我的全局范围内，我临时添加了类似

• dom - 如何与实习生一起测试 DOM 敏感性

  我想和实习生一起测试一些 DOM 相关的东西，不需要特定的固定装置，只是一般的 DOM 东西，比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau

• dom - 文档对象模型 (DOM) 概念背后的真正思想是什么？

  我是 HTML 和 HTML5 的初学者。 当我阅读以下内容时 link ，我找到了术语 DOM 和 DOM API。我通读了维基百科，但无法理解其背后的全部思想。 谁能给我解释一下: 文档对象模型

• dom - DOM 扩展/包装究竟是什么？

  我有两个主要问题。 Object 之类的扩展是否算数？ 什么是 DOM 包装？ http://perfectionkills.com/whats-wrong-with-extending-the-do

• dom - 建议用于构建小部件的最小 Dom 操作库

  对不起查询,原型(prototype)，雅虎 YUI，道场在考虑小的时候不吸引我。我想要一个模块化的库，代码尽可能小，最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操