Когда я удаляю прямоугольник, как я могу также удалить его письмо - PullRequest
Новая
       6

Когда я удаляю прямоугольник, как я могу также удалить его письмо

0 голосов
/ 26 января 2019

Я пытался удалить некоторые прямоугольники, которые выходили за границы, но когда я удаляю их, я не могу удалить их буквы.Может кто-нибудь объяснить, что я делаю не так?Также я хочу, чтобы у моих прямоугольников была непрозрачность, но когда я вставляю эту строку кода .attr("class", function(d){if((d.x + d.width)> width || (d.y + d.height)> height) return "delete"});, они теряют свою непрозрачность.Я читаю все (x, y, ширина, высота и т. Д.) Из файла CSV.Мой код такой: 

 `<!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>`

1 Ответ

0 голосов
/ 27 января 2019

Для вас было бы проще вместо рендеринга ваших прямоугольников и последующего удаления их просто отфильтровать данные перед рукой.Проблема, с которой вы сталкиваетесь, заключается в том, что, хотя вы используете одни и те же данные для текста и прямоугольников, они на самом деле не имеют связей между ними.Как указал @ rioV8, правильным способом было бы использовать элемент g для группировки связанных элементов.

Также я хочу, чтобы мои прямоугольники имели непрозрачность, но когда я вставляю эту строку кода.attr ("class", function (d) {if ((dx + d.width)> width || (dy + d.height)> height) return "delete"});они теряют свою непрозрачность

Это происходит потому, что 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...