Question

我试图删除一些超出范围的矩形，但是当我删除它们时，我无法删除它们的字母。有人可以解释我在做什么错吗？另外，我希望矩形具有不透明度，但是当我插入这行代码.attr("class", function(d){if((d.x + d.width)> width || (d.y + d.height)> height) return "delete"});时，它们将失去其不透明度。我正在从csv文件读取所有（x，y，宽度，高度等）。我的代码是这样的：

 `<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.rect { fill-opacity:.50; stroke: rgb(60,100,200); stroke-width:1px;}

</style>
<body>

<!-- load the d3.js library -->     
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1024,
    height = 768;

    // width = 1074 - margin.left - margin.right,
    // height = 818 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleLinear()
      .range([0, width]);
var y = d3.scaleLinear()
      .range([height, 0]);

  //     x.domain([0, d3.max(data, function(d) { return d.x + d.width  })]);
  // y.domain([0, d3.max(data, function(d) { return d.y + d.height  })]);

x.domain([0, width]);
y.domain([0, height]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
 .append("g")
  .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");

// get the data
  d3.csv("rectangles.csv", function(error, data) {

    if (error) throw error;

    data.forEach(function(d){
      d.height = +d.height;
      d.width = +d.width;
      d.x = +d.x;
      d.y = +d.y;
    });



  svg.selectAll(".rect")
    .data(data)
  .enter().append("rect")
   .attr("class", "rect")
   .attr("x", function(d) { return x(d.x); })
   .attr("y", function(d) { return  y(d.y) - (height - y(d.height)) })
   .attr("width", function(d) { return x(d.width) })
   .attr("height", function(d) { return height - y(d.height) })
   .attr("fill", function(d) {return d.color})

   .attr("class", function(d){if((d.x + d.width)> width || (d.y + d.height)> height) return "delete"});
   // .attr("class", function(d){if(d.x>0 && d.x < 1024 - d.width && d.y > 0 && d.y < 768 - d.height) return "delete"})

   svg.selectAll("rect.delete").remove();


  svg.selectAll("text")
    .data(data)
  .enter().append("text")
    .attr("fill","red")
    .attr("y", function(d) { return y(d.y) - (height - y(d.height))/20; })
    .attr("x", function(d) { return x(d.x) + x(d.width)/10; })
    .style("text-anchor", "middle")
    .text(function(d) {console.log(d); return d.txt});

 // add the x Axis
 svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

 // add the y Axis
 svg.append("g")
  .call(d3.axisLeft(y));
});
 </script>
</body>`

Answer 1

对于您来说，先渲染矩形然后再删除矩形，再简单地将其过滤掉，会更简单。您遇到的问题是，尽管您对文本和矩形使用相同的数据，但它们之间实际上并没有链接。正如@ rioV8指出的那样，一种正确的方法是使用g元素将相关项目组合在一起。

我也希望矩形具有不透明度，但是当我插入这行代码时。attr（“ class”，function（d）{if（（dx + d.width）> width ||（dy + d.height ）> height）返回“删除”}）；他们失去了不透明性

之所以会这样，是因为attr会覆盖先前的值，并且由于您返回的是“ delete”或undefined，因此它不再具有“ rect”类。使用类时，例如，使用attr代替classed

.classed('delete', function(d){
    if (shouldBeDeleted) return true;
    return false; 
})

通过这种方式，您仅切换delete类，并且保留该元素的任何其他类。

此处演示了如何过滤数据以及如何将相关的矩形和标签分组为g元素

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { margin-left: auto; margin-right: auto; border: solid 1px; }
    g.item rect {
      fill-opacity: 0.2;
    }
  </style>
</head>

<body>
  <script>


    var data = [{
        x: -50,
      y: 150,
      width: 100,
      height: 100,
      text: 'A',
      color: '#f00'
    }, {
      x: 100,
      y: 150,
      width: 100,
      height: 100,
      text: 'B',
      color: '#0f0'
    }, {
      x: 350,
      y: 150,
      width: 100,
      height: 100,
      text: 'C',
      color: '#00f'
    }];

    var width = 400,
        height = 400;

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var items = svg.selectAll('g.item')
        .data(data.filter(function(i){
            return i.x > 0 && i.x + i.width < width && i.y > 0 && i.y + i.height < height;
      }));

    items = items.enter()
        .append('g')
        .classed('item', true)
        .merge(items)
        .attr('transform', function(d){
        return "translate("+d.x +"," +d.y+")";
        });

    items.append('rect')
        .attr('width', (d) => d.width)
        .attr('height', (d) => d.height)
        .style('fill', (d) => d.color);

    items.append('text')
        .text((d) => d.text);

  </script>
</body>

删除矩形时，如何删除其字母

1 个答案: