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

Question

我需要更新 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

Answer 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

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

D3 Plus - Dynamically changing the position of data points in Scatter Plot

d3.js

d3plus