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

Question

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

在这种情况下,我正在构建D3甘特图并希望通过沿时间线拖动对象日期来更新项目的开始和结束日期数据.

Answer 1

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

这是一个非常基本的演示(因为你没有提供你的代码).有3个酒吧,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>