时间戳

首页 > 解决方案 > 根据 data 中指定的 ID 传递 D3.js 数据

javascript - 根据 data 中指定的 ID 传递 D3.js 数据

问题描述

我有这个随机生成的 JSON 字符串：

let jsonText = '{"data": [{"id": 4,"x": 16.53,"y": 66.19,"phi": 2.4},{"id": 2,"x": 14.09,"y": 13.15,"phi": 0.13},{"id": 9,"x": 58.04,"y": 67.88,"phi": 2.96}]}';

它是一个对象，包含由 id 号指定的 3 个 SVG 组的信息。我想根据数组中的 ID 将数据传递给这些组元素，例如<g id="4">传递第一个坐标和角度等。

我现在只有这个功能：

function on_render_body(jsonfile) {
    //parse the text and save it to object
    let parsedText = JSON.parse(jsonfile);
    //create data array of positions and stuff
    let data = [0];
    parsedText.data.forEach((element, index) => {
        data[index] = new body(element.x, element.y, element.phi);
        data[index].setID(element.id);
    });
    //select all g elements and give them data based on id
    let groups = d3.select("svg")
      .selectAll("g")
      .data(data, (d)=>d.id)
      .attr("transform", d => d.setMatrix());
}

它创建一个类body对象数组，这些对象旨在包含并使用元素的坐标和 ID。然后我想根据他们的id将数据数组传递给SVG中的所有组，但我还没有弄清楚。

标签： javascriptd3.js

解决方案

在小提琴中看到一个演示：

输入元素后，可以通过 datum() 函数检索其数据；您还可以为每个元素分配一个属性，然后在 DOM 中找到它：

const bodies = container.selectAll('g.body')
  .data(data, ({id}) => id);
  
const entered = bodies.enter()
  .append('g')
  .classed('body', true)
  .attr('body-id', ({id}) => id)
...
const body9 = container.select(`[body-id='9']`);
console.log('ID 9: ', body9.datum())

推荐阅读