How to change the position of legend in Scatter Chart D3.js

javascript css d3.js svg

473 просмотра

1 ответ

I want to shift the legends on top of the chart

I tried using CSS position relative but seems that it does not work on SVG

please have a look at the codepen

http://codepen.io/7deepakpatil/pen/LkaKoy

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

above is the code where the legend are being generated.

is it possible using css or please provide any d3 or JS way to fix this.

Автор: Rakesh Источник Размещён: 08.11.2019 11:03

Ответы (1)


1 плюс

Use SVG translate. Similar to what you have but you need to apply it to the whole legend. So I appended a 'g' element, gave it an id for easy selection later and applied a translate before you appended anything to it, like so :

var legend = svg.append('g').attr('id','legendContainer')
  .attr("transform", function(d) { return "translate(-200,100)"; }) //this is the translate for the legend
  .selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

Updated codepen : http://codepen.io/anon/pen/GqLXRx

Автор: thatOneGuy Размещён: 20.08.2016 09:02
Вопросы из категории :
32x32