Question

我已经创建了一个d3可视化文件，该文件采用json数据，为每个数据点创建一个rect，然后在rect中显示文本。但是，拖动仅适用于第一个矩形。

我想知道如何对每个矩形进行自然拖动操作。

我的Codepen项目：https://codepen.io/moriakijp/project/editor/ZRnVwr

代码如下：

drawNumbers = layout => {
    const width = innerWidth;
    const height = width * 0.5;
    const margin = {
        top: height * 0.05,
        bottom: height * 0.05,
        left: width * 0.05,
        right: width * 0.05
    };

    d3.json(layout).then(data => {

    const colsize = data[data.length-1].col;
    const rowsize = data[data.length-1].row;
    const blocksize = colsize < rowsize ? 
            (width - margin.left - margin.right) / colsize: 
            (height - margin.left - margin.right) / rowsize;

        function dragstarted(d) {
        }

        function dragged(d) {
        d3
            .select(this)
            .select("rect")
            .attr("x", (d.x = d3.event.x))
            .attr("y", (d.y = d3.event.y));
        d3
            .select(this)
            .select("text")
            .attr("x", (d.x = d3.event.x))
            .attr("y", (d.y = d3.event.y));
        }

        const dragended = (d) => {
        }

        const drag = d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);

        const svg = d3
        .select("#heatmap")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", `translate(${margin.left}, ${margin.top})`)
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .call(drag)

        svg
        .selectAll("g")
        .data(data)
        .enter()
        .append("rect")
        .attr("id", "block")
        .attr("class", "block")
        .attr("x", (d, i) => blocksize * (i % colsize)) // relative to 'svg'
        .attr("y", (d, i) => blocksize * (data[i].row - 1)) // relative to 'svg'
        .attr("width", blocksize)
        .attr("height", blocksize)
        .attr("fill", "#d00a")
        .style("opacity", 0.5)
        .attr("stroke", "#000")
        .attr("stroke-width", "2")

        svg
        .selectAll("g")
        .data(data)
        .enter()
        .append("text")
        .attr("id", "text")
        .attr("class", "text")
        .text(d => `${d.char}`)
        .attr("x", (d, i) => blocksize * (i % colsize))
        .attr("y", (d, i) => blocksize * (data[i].row - 1))
        .attr("text-anchor", "middle")
        .attr("dominant-baseline", "middle")
        .attr("fill", "#333")
        .attr("dx", blocksize / 2)
        .attr("dy", blocksize / 2)
        .style("font-size", blocksize / 2 );
    });
    };

    drawNumbers('number.json');

Answer 1

如果要获取“数据，为每个数据点创建一个rect，然后在该rect中显示文本”，则您不太正确地使用Enter模式。

让我们分解一下您拥有的东西：

const svg = d3
  .select("#heatmap")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("transform", `translate(${margin.left}, ${margin.top})`)
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .call(drag)

在这里，选择ID为heatmap的元素，然后附加一个svg，然后为数据数组中的每个项目输入一个g。这样，svg是三个g元素的选择，您可以在这些g元素上调用拖动。

接下来，您将选择三个g元素，并选择子g元素。由于没有子g元素（这是一个空选择），因此输入并附加（rect s，为选择g中的每个svg创建三个子矩形：

    svg          
    .selectAll("g")
    .data(data)
    .enter()
    .append("rect")
    ....

您对文本执行相同的操作。现在，我们有9个矩形和9个文本，每个父g元素（保存选择svg）各三个。每个父g元素都有一个拖动功能，可将第一个矩形放置在其中：

    d3
        .select(this)
        .select("rect")  // select first matching element
        .attr("x", (d.x = d3.event.x))
        .attr("y", (d.y = d3.event.y));

由于每个g具有三个矩形，因此仅第一个矩形将被移动。

一种解决方案是不对g中的每个svg进行输入循环：您的数据未嵌套，我们已经为数据数组中的每个项目设置了g。因此，我们只需要向每个g附加一个文本元素和一个rect元素：

svg.append("rect").attr("x", function(d) {...

最初绑定到g的数据也绑定到此子元素，无需重新绑定数据。 尽管如此，我还是将svg重命名为其他名称，以便更能反映其作用和内容。。

总的来说，它可能类似于：

const g = d3
  .select("#heatmap")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("transform", `translate(${margin.left}, ${margin.top})`)
  .selectAll("g") 
  .data(data)
  .enter()      // create a g for each item in the data array
  .append("g")
  .call(drag)

  // add a rect to each g
  g.append("rect")
  .attr("id", "block")
  .attr("class", "block")
  .attr("x", (d, i) => blocksize * (i % colsize)) // relative to 'svg'
  .attr("y", (d, i) => blocksize * (data[i].row - 1)) // relative to 'svg'
  .attr("width", blocksize)
  .attr("height", blocksize)
  .attr("fill", "#d00a")
  .style("opacity", 0.5)
  .attr("stroke", "#000")
  .attr("stroke-width", "2")

// add text to each g
g.append("text")
  .attr("id", "text")
  .attr("class", "text")
  .text(d => `${d.char}`)
  .attr("x", (d, i) => blocksize * (i % colsize))
  .attr("y", (d, i) => blocksize * (data[i].row - 1))
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .attr("fill", "#333")
  .attr("dx", blocksize / 2)
  .attr("dy", blocksize / 2)
  .style("font-size", blocksize / 2 );

这是经过上述修改的running example。

拖动矩形无法正常工作

1 个答案: