javascript - 将多个数据数组附加到数据点

Question

我有两个相互补充的数据数组。一个数组保存坐标，而另一个数组保存该团队的唯一数据。

我的想法是，当单击数据点时，该数组的索引 0 会打印到屏幕底部的(文本)框中。然后反过来，当单击该数据点时，它还会在其团队名称下方显示辅助数组的内容。但是，据我所知，您不能在同一个变量中使用两个数据集。

我不是在寻找给我的答案，而是在想要在同一元素上使用多个数据集时了解 D3 的一些知识和方向。

var dataPoints = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];

var teamData = [["Arsenal", "a", "b", "c", "d", "e"], ["Chelsea", "f", "g", "h", "i", "j"], ["Liverpool", "l", "m", "m", "o", "p"], ["Manchester City", "q", "r", "s", "t", "u"], ["Manchester United", "v", "w", "x", "y", "z"], ["Tottenahm", “1", "2", "3", "4", "5"]];

var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 7)
    .attr("cx", function(d) { return xScale(d[1]); })
    .attr("cy", function(d) { return yScale(d[2]); })
    .on('click', function(d, i) {
        console.log("click", d[0]);
    })
    .attr("fill", function(d) {
        var result = null;

        if (data.indexOf(d) >= 0) {
            result = colours(d);
        } else {
            result = "white";
        }
        return result;               
    });

var textBox = svg.append("g")
        .attr("transform", "translate(5,385)");

    textBox.append("rect")
        .attr("height", 150)
        .attr("width", 509)
        .style("stroke", bordercolor)
        .style("fill", "none")
        .style("stroke-width", border);

    circles.on("click", function(d) {
        textBox.append("text")
        .attr("x", 10)
        .attr("y", 20)
        .text(d[0])
    })

Answer 1

这里适当的解决方案是合并两个数据集，因此每个元素都有一个完整的数据。

但是，一种简单的解决方法是根据一个数组过滤另一个数组。例如，根据 dataPoints 数组过滤 teamData 数组并记录结果:

function filter(d) {
    console.log(teamData.filter(e => e[0]===d[0])[0])
}

这是一个简单的演示，段落是使用 dataPoints 数组作为数据创建的。单击它们以在 teamData 数组上获取相应的团队:

var dataPoints = [
  ["Arsenal", -0.0032967741593940836, 0.30399753945657115],
  ["Chelsea", 0.2752159801936051, -0.0389675484210763],
  ["Liverpool", -0.005096951348655329, 0.026678627680541075],
  ["Manchester City", -0.004715381791104284, -0.12338379196523988],
  ["Manchester United", 0.06877966010653305, -0.0850615090351779],
  ["Tottenham", -0.3379518099485709, -0.09933664174939877]
];

var teamData = [
  ["Arsenal", "a", "b", "c", "d", "e"],
  ["Chelsea", "f", "g", "h", "i", "j"],
  ["Liverpool", "l", "m", "m", "o", "p"],
  ["Manchester City", "q", "r", "s", "t", "u"],
  ["Manchester United", "v", "w", "x", "y", "z"],
  ["Tottenahm", "1", "2", "3 ", "4", "5"]
];

d3.select("body").selectAll(null)
  .data(dataPoints)
  .enter()
  .append("p")
  .text(d => d[0])
  .on("click", filter);

function filter(d) {
  console.log(teamData.filter(e => e[0] === d[0])[0])
}

<script src="https://d3js.org/d3.v5.min.js"></script>