Как избавиться от повторяющихся значений в d3? - PullRequest
Новая
       6

Как избавиться от повторяющихся значений в d3?

0 голосов
/ 17 апреля 2020

Я пытаюсь создать легенду для диаграммы рассеяния в d3, но все повторяющиеся значения отображаются в легенде. Как мне просто отобразить уникальные значения?

Также отдельный вопрос, но как мне избавиться от запятых в метках оси?

Вот как это выглядит прямо сейчас: enter image description here

Вот что у меня есть в функции d3.csv 

var x = d3.scaleLinear()
  .domain([1900,d3.extent(data, d=> d.yearFilmed)[1]])
  .range([0, width]);
svG
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

var y = d3.scaleLinear()
  .domain([1900,d3.extent(data, d=> d.yearBuilt)[1]])
  .range([height, 0]);
svG
  .append('g')
  .call(d3.axisLeft(y));


const colorScale = d3.scaleOrdinal()
  .range(d3.schemeCategory10);


var plot = (data, svG) =>{
var circle = svG.selectAll('circle')
    .data(data);
circle
    .enter()
    .append("circle")
    .attr("cx", function(d){ return x(d.yearFilmed) })
    .attr("cy", function(d){ return y(d.yearBuilt) })
    .attr("r", 10)
    .attr('fill', d => colorScale(d.filmGenre))
    .on("mouseover", tipMouseover)
    .on("mouseout", tipMouseout);    
var rekt = svG.selectAll("rect")
                .data(data)
                .attr("class", "legend");

rekt
    .enter()
    .append('rect')
    .attr("x", width+20)
    .attr("transform", function(d, i) { return "translate(0, " + i * 20 + ")"; })
    .attr("width", 18)
    .attr("height", 18)
    .attr("fill", d => colorScale(d.filmGenre));

svG.selectAll("text.legend")
rekt.enter()
    .append("text")
    .attr("class", "legend") // create a class for legend text. so when you make changes to it, other text on this pg won't be affected
    .attr("y", 15)
    .attr("x", width+45)
    .attr("transform", function(d, i) { return "translate(0, " + i * 20 + ")"; })
    .text(function(d) {return d.filmGenre;})

rekt
    .exit()
    .remove()
};
var archStyl = () => {
    d3.selectAll('rect')
    .attr("fill", d => colorScale(d.archStyle))
    d3.selectAll('text.legend')
    .text(function(d) {return d.archStyle;});
    d3.selectAll("circle")
    .transition()
    .attr('fill', d => colorScale(d.archStyle)); 
    plot(data, svG);
};
var filmGenr = () => {
    d3.selectAll('rect')
    .attr("fill", d => colorScale(d.filmGenre))
    d3.selectAll('text.legend')
    .text(function(d) {return d.filmGenre;});
    d3.selectAll("circle")
    .transition()
    .attr('fill', d => colorScale(d.filmGenre)); 
    plot(data, svG);
};

document.getElementById('archStyl').addEventListener('click', archStyl);
document.getElementById('filmGenr').addEventListener('click', filmGenr);

plot(data, svG);

});

1 Ответ

0 голосов
/ 17 апреля 2020

Здесь вы go измените свой код с этим для фильтрации уникальных значений 

var rekt = svG.selectAll("rect")
           .data(d3.map(data, function(d){return d.filmGenre;}).keys())
           .attr("class", "legend");
...