如何通过直观地操作图表来更新数据

Question

是否有可能通过在 D3 图表上直观地操作 SVG 对象来更新数据？或者可以指出我在哪里找到方法的正确方向？

在本例中，我正在构建一个 D3 甘特图，并希望通过沿时间线拖动对象日期来更新项目的开始和结束日期数据。

Answer 1

在 D3 中，您可以基于数据操作 DOM 元素，也可以基于与这些元素的交互来操作数据。请记住，基准面只是一个对象，您可以随时更改。在大多数 D3 方法中，它是回调中的第一个参数。

这是一个非常基本的演示(因为您没有提供代码(。有三个柱线，foo、bar和baz，其值分别为2000、4000和1500。秤的域从0到5000。

在 SVG 中，我根据条形的数据和比例绘制条形。但是，我添加了一个拖动函数，它不仅更改了 DOM 元素本身，还更改了绑定到它的数据。这可以通过这样的回调来实现：

function(d){
    //   ^--- the first argument is the datum
    d = whatever;//changing the datum
}

这是演示，水平拖动条并查看控制台：

var data = [{
  name: 'foo',
  value: 2000
}, {
  name: 'bar',
  value: 4000
}, {
  name: 'baz',
  value: 1500
}];
var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain([0, 5000])
  .range([0, 500]);
var bars = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("y", function(d, i) {
    return 10 + i * 30
  })
  .attr("height", 20)
  .attr("width", function(d) {
    return scale(d.value)
  })
  .style("fill", "#666")
  .call(d3.drag().on("drag", function(d) {
    d.value = scale.invert(d3.mouse(this)[0])
    d3.select(this).attr("width", scale(d.value))
    console.log("datum: " + JSON.stringify(d))
  }))

 .as-console-wrapper { max-height: 25% !important;}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="200"></svg>