一组中的d3 rect干扰另一组中的rect [英] d3 rect in one group interfering with rect in another group

问题描述

我有一个名为groove的组，该组有两个矩形.这些未绑定到数据.

I have a group called groove which has two rects. These are not bound to the data.

我还有一个名为group的组，其中有许多与数据绑定的区域.

I also have a group called group which has many rects which are bound to the data.

在名为group的第二个组中，只有三个数据点，但仅显示两个.

In the second group called group there are only three data points, but only two are displaying.

为什么第一个没有渲染?

Why is the first one not being rendered?

我以前已经看过这个，但是不记得如何解决.

I have seen this before but can't remember how to solve it.

var margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    },
    width = 600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

  var svg = d3.select("svg");

  var data = [{
      x: 200
    },
    {
      x: 300
    },
    {
      x: 400
    }
  ];

  var groove = svg.append("g")
    .attr("class", "groove_group");

  groove.append("rect")
    .attr("x", 100)
    .attr("y", 150)
    .attr("rx", 2)
    .attr("ry", 2)
    .attr("height", 6)
    .attr("width", 800)
    .style("fill", "grey");

  groove.append("rect")
    .attr("x", 102)
    .attr("y", 152)
    .attr("rx", 2)
    .attr("ry", 2)
    .attr("height", 2)
    .attr("width", 796)
    .style("fill", "black");

  // create group
  var group = svg.selectAll("g")
    .data(data)
    .enter().append("g")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
    .on("click", removeElement);

  group.append("rect")
    .attr("x", function(d) {
      return d.x;
    })
    .attr("y", 100)
    .attr("height", 100)
    .attr("width", 15)
    .style("fill", "lightblue")
    .attr('id', function(d, i) {
      return 'handle_' + i;
    })
    .attr("rx", 6)
    .attr("ry", 6)
    .attr("stroke-width", 2)
    .attr("stroke", "black");

  group.append("text")
    .attr("x", function(d) {
      return d.x
    })
    .attr("y", 100)
    .attr("text-anchor", "start")
    .style("fill", "black")
    .text(function(d) {
      return "x:" + d.x
    });

  function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
  }

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

  function dragended(d) {
    d3.select(this)
      .classed("active", false);
  }

  function removeElement(d) {
    d3.event.stopPropagation();
    data = data.filter(function(e) {
      return e != d;
    });
    d3.select(this)
      .remove();
  }

<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>

推荐答案

执行此操作时:

var group = svg.selectAll("g")

您正在选择一个先前存在的组(groove).因此，您的回车选择少了一个元素.

You are selecting a previously existing group (which is groove). Therefore, your enter selection has one less element.

解决方案

不选择任何内容:

var group = svg.selectAll(null)

这是您所做的更改的代码:

Here is your code with that change:

var margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
  },
  width = 600 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;

var svg = d3.select("svg");

var data = [{
  x: 200
}, {
  x: 300
}, {
  x: 400
}];

var groove = svg.append("g")
  .attr("class", "groove_group");

groove.append("rect")
  .attr("x", 100)
  .attr("y", 150)
  .attr("rx", 2)
  .attr("ry", 2)
  .attr("height", 6)
  .attr("width", 800)
  .style("fill", "grey");

groove.append("rect")
  .attr("x", 102)
  .attr("y", 152)
  .attr("rx", 2)
  .attr("ry", 2)
  .attr("height", 2)
  .attr("width", 796)
  .style("fill", "black");

// create group
var group = svg.selectAll(null)
  .data(data)
  .enter().append("g")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended))
  .on("click", removeElement);

group.append("rect")
  .attr("x", function(d) {
    return d.x;
  })
  .attr("y", 100)
  .attr("height", 100)
  .attr("width", 15)
  .style("fill", "lightblue")
  .attr('id', function(d, i) {
    return 'handle_' + i;
  })
  .attr("rx", 6)
  .attr("ry", 6)
  .attr("stroke-width", 2)
  .attr("stroke", "black");

group.append("text")
  .attr("x", function(d) {
    return d.x
  })
  .attr("y", 100)
  .attr("text-anchor", "start")
  .style("fill", "black")
  .text(function(d) {
    return "x:" + d.x
  });

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

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

function dragended(d) {
  d3.select(this)
    .classed("active", false);
}

function removeElement(d) {
  d3.event.stopPropagation();
  data = data.filter(function(e) {
    return e != d;
  });
  d3.select(this)
    .remove();
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

这篇关于一组中的d3 rect干扰另一组中的rect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！