是否可以将 Danfojs 系列对象提供给 D3js data() 绑定方法？

Question

我从我的数据创建了一个 Series 对象，如下所示：

但我不知道如何实际实现 Series 对象来缩放和绑定数据，这是我的代码：

function render(svg) {
  //   const xValue = d => d['Population (2020)'];
  //   const yValue = d => d['Country (or dependency)'];

  //   const xExtent = d3.extent(world_population, xValue);
  //   const xScale = d3
  //     .scaleLinear()
  //     .domain(xExtent)
  //     .range([0, width]);

  //   const yScale = d3
  //     .scaleBand()
  //     .domain(world_population.map(yValue))
  //     .range([0, height]);

  const xValue = d => d.data;
  const yValue = d => d.index;

  const xExtent = d3.extent(plot_data.values);
  const xScale = d3
    .scaleLinear()
    .domain(xExtent)
    .range([0, width]);

  const yScale = d3
    .scaleBand()
    .domain(plot_data.index)
    .range([0, height]);

  const selection = d3.select(svg);
  selection
    .selectAll('rect')
    .data(plot_data)
    .enter()
    .append('rect')
    .attr('fill', 'slateblue')
    .attr('y', d => yScale(d.index))
    .attr('width', d => xScale(d.data))
    .attr('height', yScale.bandwidth());
}

任何帮助或指点将不胜感激。

Answer 1

这里真正的问题是关于您的数据结构：如何为了 D3.js 目的而切换到更方便的数据结构？

正如您强调的那样，我们在 plot_data.index_arr 中有键，在 plot_data.data 中有数据。

通过在 index_arr 上执行 map 我们得到了索引。回调 i 的第二个参数是我们可以用来获取数据的索引，通过访问 plot_data.data[i].

newData = plot_data.index_arr.map((d,i) => [d, plot_data.data[i]])

完成后，我们可以随心所欲地放置它们：这里我将它们放在一个数组中，但您可以将它们放在 {key:value} 对象或 Map object.

中

plot_data={
  index_arr:['a',"b", "c"],
  data:[1,2,3]
}
console.log(plot_data.index_arr.map((d,i) => [d, plot_data.data[i]]))

是否可以将 Danfojs 系列对象提供给 D3js data() 绑定方法？

Is it possible to feed a Danfojs Series object to D3js data() binding method?

javascript

observable

d3.js

danfojs