D3 заполнить сегмент круговой диаграммы при наведении курсора - PullRequest
Новая
       35

D3 заполнить сегмент круговой диаграммы при наведении курсора

0 голосов
/ 05 мая 2018

У меня круговая диаграмма определена так: 

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return +d.value; });

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0.65*radius);

var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc")

arc.append("path")
    .attr("d", path)
    .attr("fill", function(d, i) { return colours[i]; }) //Everything up to here works
    .on('mouseover', function() {console.log('over'); arc.style("fill","red");});

Последняя строка работает только наполовину - консоль печатает «поверх», но сегмент не меняет цвет. Это неправильный подход?

1 Ответ

0 голосов
/ 05 мая 2018

Вы должны выбрать текущий элемент с d3.select(this) вместо arc: 

// .on('mouseover', function() { arc.style("fill","red"); });
.on('mouseover', function() { d3.select(this).style("fill","red"); });

Вот демоверсия: 

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var g = svg.append("g").attr("transform", "translate(100,100)")

var data = [
  { value: 4 }, { value: 12 }
];
var colours = ["green", "blue"];
var radius = 25;

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return +d.value; });

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0.65*radius);

var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc")

arc.append("path")
    .attr("d", path)
    .attr("fill", function(d, i) { return colours[i]; }) //Everything up to here works
    // .on('mouseover', function() { console.log('over'); arc.style("fill","red"); });
    .on('mouseover', function() { console.log('over'); d3.select(this).style("fill","red"); });
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
...