个人中心
gpt4 book ai didi

javascript - 通过绑定(bind)新数据来操作元素

转载 作者：可可西里 更新时间：2023-11-01 01:16:51 25 4
gpt4 key购买 nike

我正在尝试研究如何仅通过绑定(bind)新数据来更新某些 D3.js 元素。我实际上不确定这是否可能，但感觉应该如此。

首先我创建了四个 SVG 圆圈，并将 cx 偏移设置为数据的函数:

 <body><div id="container"></div></body>

 var svg = d3.select("div.container").append("svg")
     .attr("class", "chart")
     .attr("width", 1000)
     .attr("height", 500);

  // Create initial data and display
  var data = [0, 10, 20, 30];
  var circle = svg.selectAll("circle")
      .data(data)
      .enter()
      .append('circle')
      .attr("cx", function(d) {
        return d*10;
      })
      .attr("cy", 100)
      .attr("r", 10)
      .style("fill", "steelblue");

接下来我附加新数据和转换。我希望看到圆圈缓慢移动到新位置(这就是我想要实现的目标)，但他们没有:

  var data1 = [40, 50, 60, 70];
  circle.data(data1).transition().duration(2500);

我犯了一个基本错误吗？也许我选错了。或者仅仅通过操作数据来更新元素是不可能的？

更新:如果我执行 console.log(circle)，那么我会看到一个 SVG 圆形元素数组，这正是我所期望的。

最佳答案

强大(但令人讨厌)的 D3.js 有时会迫使您重复自己进行简单的可视化。如果你告诉它你想创建一个元素，其属性以某种方式从数据中派生，然后你想将这些属性转换为新数据，你必须再次告诉它如何派生值(如果你想做一些不同的事情，例如不同的视觉布局)。正如@Andrew 所说，您必须告诉它在转换时要做什么。

您可以按照以下模式解决这个“问题”:

var foo = d3.select('foo');
function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar');
  items.exit().remove();
  items
    .attr('foo',function(d){ return d });
}

在 2.0 中，当您在 enter() 中 append() 新项目时，它们会自动添加到原始数据绑定(bind)选择中，因此调用 attr () 等稍后将适用于它们。这使您可以使用相同的代码来设置初始值和更新值。

由于您不想在每次更新时都重新创建 SVG 包装器，因此您应该在 redraw 函数之外创建它。

如果你想执行转换:

function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar')
    .attr('opacity',0)
    .attr('foo',initialPreAnimationValue);
  items.exit().transition().duration(500)
    .attr('opacity',0)
    .remove();
  items.transition.duration(500)
    .attr('opacity',1)
    .attr('foo',function(d){ return d });
}

请注意，上面通过索引将对象与数据相关联。如果你想删除一个中间数据点以在删除它之前淡出该数据点(而不是删除最后一个项目并将所有其他项目转换为看起来像那个)那么你应该指定一个唯一的(非索引)字符串值来关联每个项目:

var data = [
  {id:1, c:'red',   x:150},
  {id:3, c:'#3cf',  x:127},
  {id:2, c:'green', x:240},
  {id:4, c:'red',   x:340}
];
myItems.data(data,function(d){ return d.id; });

您可以在 my D3.js playground 上看到一个例子并现场使用它.

首先，看看当您注释掉其中一条数据行，然后再将其放回去时会发生什么。接下来，从第 4 行对 data() 的调用中删除参数 ƒ('id')，然后再次尝试在数据行中注释掉和注释掉。

编辑:或者，正如杰出的 mbostock 评论的那样，您可以使用 selection.call() 以及一个可重用函数作为 DRY 代码的一种方式: 

var foo = d3.select('foo');
function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar').call(setEmAll);
  items.exit().remove();
  items.call(setEmAll);
}

function setEmAll(myItems){
  myItems
    .attr('foo',function(d){ return d*2 })
    .attr('bar',function(d){ return Math.sqrt(d)+17 });
}

如上所示，.call() 调用一个函数并将选择作为参数传递，这样您就可以在多个位置对您的选择执行相同的设置。

关于javascript - 通过绑定(bind)新数据来操作元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9518186/

25 4 0
文章推荐： java - ProcessRequest 方法
文章推荐： swift - 测试一天中的当前时间是否在两个 TimeIntervals 之间
文章推荐： ios - 使用 swift 写入和读取数据
文章推荐： java - 为什么此代码打印 100 而不是 1？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com