D3 Scatterplot легенда перекрывается - PullRequest
Новая
       19

D3 Scatterplot легенда перекрывается

0 голосов
/ 17 мая 2019

У меня есть диаграмма рассеяния, которая отлично работает, но легенда, которую я добавляю, перекрывает график. Мой текущий подход состоит в том, чтобы сделать DIV диаграммы равным 70% ширины, и чтобы легенда заняла оставшиеся 30%. По какой-то причине легенда не отображается на экране, хотя HTML-код там есть.

Это ссылка на мою первоначальную проблему: http://jsfiddle.net/chp5a09e/373/

Вот ссылка на то, что я сейчас пытаюсь: http://jsfiddle.net/chp5a09e/372/

var legend = d3.select("#legend").append("svg")
    .attr("width", $("#legend").width())
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  legend.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

  legend.append("rect")
    .attr("x", width - 12)
    .attr("width", 12)
    .attr("height", 12)
    .style("fill", function(d) {
      return color(d);
    })
    .on("click", function(d) {
      d3.selectAll(".symbol").style("opacity", 1)

      if (clicked !== d) {
        d3.selectAll(".symbol")
          .filter(function(e) {
            return e.items[columns.indexOf("Channel")] !== d;
          })
          .style("opacity", 0.1)
        clicked = d
      } else {
        clicked = ""
      }
    });

  legend.append("text")
    .attr("x", width - 16)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });

1 Ответ

1 голос
/ 17 мая 2019

HTML есть

Есть только элементы группы (g), и они сами никогда не видны.В вашем исходном коде 

var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    ...

  legend.append("rect")

legend здесь выделено несколько элементов g.legend, и, таким образом, прямоугольник добавляется к каждому из них, а также получает доступ к данным, привязанным кродительский г.Однако в вас новый код 

var legend = d3.select("#legend").append("svg")
    ...
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  legend.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    ...;

  legend.append("rect")

legend здесь относится только к одному элементу g, который содержит всю вашу легенду.Ваш legend.selectAll(".legend") не сохраняется в переменную, поэтому, находясь внутри цепочки, вы устанавливаете класс и правильно трансформируете атрибуты, вы не используете его для добавления к нему прямоугольника - опять же, legend в этот момент относится к внешнему видуодин контейнер g.

Потенциальное решение: 

var legendCnt = d3.select("#legend").append("svg")
    .attr("width", $("#legend").width())
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var legend = legendCnt.selectAll(".legend")
    .data(color.domain())
...

Вы заметите, что вам нужно удалить или опустить атрибут x для текста и прямоугольника, так как 0 теперь находится наначало легенды вместо диаграммы

...