d3. js - P ie диаграмма с интерактивными проблемами при наведении легенды - PullRequest
Новая
       34

d3. js - P ie диаграмма с интерактивными проблемами при наведении легенды

0 голосов
/ 03 марта 2020

Я сделал диаграмму d3. js p ie и связанную легенду с popu данных о населении. Когда я наводил курсор на сегменты p ie, я достигал увеличения связанных частей квадрата легенды и самого сегмента p ie ( больший externalRadius ). Сейчас я пытаюсь сделать наоборот. Когда я наводю курсор на квадрат легенды, я хочу увеличить сам квадрат и связанный с ним сегмент p ie. Примерно такой пример здесь https://www.amcharts.com/demos/pie-chart-with-legend/. Я напишу только часть кода, относящуюся к моей проблеме с диаграммой p ie. 

var pie = d3.pie()
            .value(function(d) {return d.pop})(popu);

var seg = d3.arc()
             .innerRadius(100)
             .outerRadius(150)
             .padAngle(.1)
             .padRadius(45);

var segover = d3.arc()
               .innerRadius(100)
               .outerRadius(170)
               .padAngle(.1)
               .padRadius(45);

Так что эта часть работает отлично. 

svg.append("g")
   .attr("class", "pieChart")
   .attr("transform", "translate(1250,570)")
   .selectAll("path")
   .data(pie) 
   .append("path")
   .attr("class", "pie")
   .attr("id", function(d){return d.data.id})
   .attr("d", seg)
   .on("mouseenter", function(d){
         d3.select(this)
           .transition(10)
           .duration(100)
           .attr("d", segover)
})

Затем я попытался изменить p ie сегмент диаграммы при наведении на связанные с легендой сегменты. 

var pieEl = svg.selectAll(".pie");
var piePath = pieEl.nodes();

svg.append("g")
   .attr("class", "legend")
   .attr("transform", "translate(-50,280)")
   .selectAll(".mySquers")
   .data(pie)
   .enter()
   .append("rect")
   .attr("class", "rec")
   .attr("x", 100)
   .attr("y", function(d,i){ return 100 + i*25})
   .attr("width", "15")
   .attr("height", "15")
   .attr("id", function(d,i){ return (popu[d,i].id)})
   .style("fill",function(d,i){
          if (this.id == piePath[i].id){
              return piePath[i].getAttribute("fill")
              }
              })
  .on("mouseenter", function(d){
          for (var i=0; i<piePath.length; i++){                                                                
              if (piePath[i].id == d.data.id){
                  piePath[i].setAttribute("d", segover);
               }}
})

Когда я в лотке для установки атрибута ("d", segover) в DOM вместо атрибута d, записанного в виде строки, как обычно (d = " M144.58 ..... ") У меня есть функция (d =" function (p ie) {_e);} "и при наведении курсора p ie сегмент исчезает. Но, например, если я установлю атрибут fill на красный при наведении курсора, он изменится и сегмент будет закрашен. Так что обозначение кода это хорошо. Есть ли какое-то поведение пути d, созданного с помощью d3.ar c (), которое мне не хватает? Любое предложение приветствуется.

1 Ответ

0 голосов
/ 03 марта 2020

Я думаю, что вы должны передавать свои данные в качестве аргумента в вашей функции. Обычно это берется в качестве аргумента по умолчанию, когда вы возвращаете функцию напрямую.

piePath[i].setAttribute("d", segover(*data associated with segment*));

svg.append("g")
   .attr("class", "pieChart")
   .attr("transform", "translate(1250,570)")
   .selectAll("path")...
   .attr("d", seg) // this is same as : attr("d", seg(d))
   .on("mouseenter", function(d){
         d3.select(this)
           .transition(10)
           .duration(100)
           .attr("d", segover) // same here
})
...