Изменить цвет одного аккорда в диаграмме аккордов, используя D3.js

Question

D3 и Javascript новичок здесь. Я хотел бы изменить цвет одного аккорда в диаграмме аккордов, которая отображается с помощью D3. В идеале этот цвет может быть произвольным, без отношения к исходным/целевым объектам аккорда.

Как я могу идентифицировать один аккорд, чтобы потом получить доступ к нему, чтобы заполнить его?

Here's an image (плохо отредактированный с помощью редактора изображений) с желаемым эффектом (зеленый аккорд).

Answer 1

var matrix = [ 
 
    [11975, 5871, 8916, 2868], 
 
    [ 1951, 10048, 2060, 6171], 
 
    [ 8010, 16145, 8090, 8045], 
 
    [ 1013, 990, 940, 6907] 
 
]; 
 

 
var chord = d3.layout.chord() 
 
    .padding(.05) 
 
    .sortSubgroups(d3.descending) 
 
    .matrix(matrix); 
 

 
var width = 960, 
 
    height = 500, 
 
    innerRadius = Math.min(width, height) * .41, 
 
    outerRadius = innerRadius * 1.1; 
 

 
var fill = d3.scale.ordinal() 
 
    .domain(d3.range(4)) 
 
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
svg.append("g").selectAll("path") 
 
    .data(chord.groups) 
 
    .enter().append("path") 
 
    .style("fill", function(d) { return fill(d.index); }) 
 
    .style("stroke", function(d) { return fill(d.index); }) 
 
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) 
 
    .on("mouseover", fade(.1)) 
 
    .on("mouseout", fade(1)); 
 

 
var ticks = svg.append("g").selectAll("g") 
 
    .data(chord.groups) 
 
    .enter().append("g").selectAll("g") 
 
    .data(groupTicks) 
 
    .enter().append("g") 
 
    .attr("transform", function(d) { 
 
     return "rotate(" + (d.angle * 180/Math.PI - 90) + ")" 
 
      + "translate(" + outerRadius + ",0)"; 
 
    }); 
 

 
ticks.append("line") 
 
    .attr("x1", 1) 
 
    .attr("y1", 0) 
 
    .attr("x2", 5) 
 
    .attr("y2", 0) 
 
    .style("stroke", "#000"); 
 

 
ticks.append("text") 
 
    .attr("x", 8) 
 
    .attr("dy", ".35em") 
 
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; }) 
 
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) 
 
    .text(function(d) { return d.label; }); 
 

 
svg.append("g") 
 
    .attr("class", "chord") 
 
    .selectAll("path") 
 
    .data(chord.chords) 
 
    .enter().append("path") 
 
    .attr("d", d3.svg.chord().radius(innerRadius)) 
 
    .style("fill", function(d) { return fill(d.target.index); }) 
 
    .style("opacity", 1) 
 
.on("mouseover", function(){ 
 
    d3.select(this).style("opacity", 0.3); 
 
}) 
 
.on("mouseout", function(){ 
 
    d3.select(this).style("opacity", 1); 
 
}); 
 

 
// Returns an array of tick angles and labels, given a group. 
 
function groupTicks(d) { 
 
    var k = (d.endAngle - d.startAngle)/d.value; 
 
    return d3.range(0, d.value, 1000).map(function(v, i) { 
 
    return { 
 
     angle: v * k + d.startAngle, 
 
     label: i % 5 ? null : v/1000 + "k" 
 
    }; 
 
    }); 
 
} 
 

 
// Returns an event handler for fading a given chord group. 
 
function fade(opacity) { 
 
    return function(g, i) { 
 
    svg.selectAll(".chord path") 
 
     .filter(function(d) { return d.source.index != i && d.target.index != i; }) 
 
     .transition() 
 
     .style("opacity", opacity); 
 
    }; 
 
}

body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.chord path { 
 
    fill-opacity: .67; 
 
    stroke: #000; 
 
    stroke-width: .5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Я только дополнительные функциональные возможности для мыши над и мыши вне,

svg.append("g") 
    .attr("class", "chord") 
    .selectAll("path") 
    .data(chord.chords) 
    .enter().append("path") 
    .attr("d", d3.svg.chord().radius(innerRadius)) 
    .style("fill", function(d) { return fill(d.target.index); }) 
    .style("opacity", 1) 
.on("mouseover", function(){ 
    d3.select(this).style("opacity", 0.3); 
}) 
.on("mouseout", function(){ 
    d3.select(this).style("opacity", 1); 
}); 

В приведенном выше коде см MouseOver и MouseOut обратных вызовов, Здесь я просто изменяя непрозрачность, если вы хотите изменить цвет, воспользуйтесь атрибутом fill, чтобы заполнить цвет.

Надеюсь, что вы ищите это. Если меня не спрашивают больше. : D