D3 Plus - 动态改变散点图中数据点的位置答案

【问题标题】：D3 Plus - Dynamically changing the position of data points in Scatter PlotD3 Plus - 动态改变散点图中数据点的位置
【发布时间】：2016-08-08 16:06:46
【问题描述】：

我需要更新click event 上数据点的X 和Y 坐标，并将其移动到绘图上的新位置。

代码：

var sample_data = [
  {"value": 100, "weight": .45, "type": "alpha"},
  {"value": 70, "weight": .60, "type": "beta"},
  {"value": 40, "weight": 0.80, "type": "gamma"},
  {"value": 15, "weight": .32, "type": "delta"}
];

$(function(){
  var visualization = d3plus.viz()
                            .container("#dv-container")
                            .data(sample_data)
                            .type("scatter")
                            .id("type")
                            .x("value")
                            .y("weight")
                            .height(400)
                            .width(600)
                            .draw();

  $("#btnUpdate").click(function(){
    //update the value of first data point
    sample_data[0].value = 50;
    sample_data[0].weight = 0.5;

    //this is where I need help to update the chart
  });
});

Fiddle

【问题讨论】：

标签： d3.js d3plus

【解决方案1】：

做visualization.data(sample_data).draw();按钮点击重绘：

 $("#btnUpdate").click(function(){
        //update the value of first data point
        sample_data[0].value = 50;
        sample_data[0].weight = 0.5;
        //redraw
        visualization.data(sample_data).draw();
    });

工作代码here

【讨论】：

谢谢，这很好用。但这只是一个演示，实际数据可能非常大。从头开始重新绘制整个可视化时，我有点担心性能问题。有没有其他方法可以单独更改某些数据点的位置？
我认为它不可能使用 d3plus（可用 API 文档中的任何内容），除非你去破解代码。您需要重新绘制因为两个原因：1）比例可能会改变。 2) 如果比例发生变化，那么圆圈的位置也会发生变化。
是的，我看过文档但什么也没找到。谢谢你的帮助。我现在就采用这个解决方案。
Cyril 是对的，目前不支持直接从可视化中编辑数据点的坐标。