javascript - 选择对象时更改链接的颜色

Question

我是第一次使用D3js，所以不是很懂。我读了this book online .我关注了this example构建概念图。

这是我的结果:

它很完美，但我希望连接所选对象的链接的颜色(如绿色)不同于另一个(并且更粗)。现在它们总是灰色的。

这是我的代码:

var data = [["belgium", ["poliomyelitis"]],
            ["bulgaria", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["czech", ["diphtheria", "tetanus", "whooping cough", "measles"]],
            ["croatia", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["france", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B"]],
            ["greece", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B"]],
            ["italy", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B"]],
            ["latvia", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["malta", ["diphtheria", "tetanus", "poliomyelitis"]],
            ["poland", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["romania", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["slovakia", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["slovenia", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["hungary", ["diphtheria", "tetanus", "poliomyelitis", "hepatitis B", "whooping cough", "measles", "nodule"]],
            ["austria", []],
            ["cyprus", []],
            ["denmark", []],
            ["estonia", []],
            ["finland", []],
            ["germany", []],
            ["ireland", []],
            ["iceland", []],
            ["lithuania", []],
            ["luxembourg", []],
            ["norway", []],
            ["portugal", []],
            ["spain", []],
            ["sweden", []],
            ["uk", []]
];

var outer = d3.map();
var inner = [];
var links = [];

var outerId = [0];

data.forEach(function(d) {
    if(d == null) {
        return;
    }

    i = {id: 'i' + inner.length, name: d[0], related_links: []};
    i.related_nodes = [i.id];
    inner.push(i);

    if(!Array.isArray(d[1])) {
        d[1] = [d[1]];
    }

    d[1].forEach(function(d1) {
        o = outer.get(d1);

        if(o == null) {
            o = {name: d1,  id: 'o' + outerId[0], related_links: []};
            o.related_nodes = [o.id];
            outerId[0] = outerId[0] + 1;    
            outer.set(d1, o);
        }

        // create the links
        l = {id: 'l-' + i.id + '-' + o.id, inner: i, outer: o}
        links.push(l);

        // and the relationships
        i.related_nodes.push(o.id);
        i.related_links.push(l.id);
        o.related_nodes.push(i.id);
        o.related_links.push(l.id);
    });
});

data = {
    inner: inner,
    outer: outer.values(),
    links: links
}

// sort the data -- TODO: have multiple sort options
outer = data.outer;
data.outer = Array(outer.length);

var i1 = 0;
var i2 = outer.length - 1;

for(var i = 0; i < data.outer.length; ++i) {
    if(i % 2 == 1)
        data.outer[i2--] = outer[i];
    else
        data.outer[i1++] = outer[i];
}

console.log(data.outer.reduce(function(a,b) { 
    return a + b.related_links.length; 
}, 0) / data.outer.length);

// from d3 colorbrewer
var colors = ["#a50026",
                "#d73027",
                "#f46d43",
                "#fdae61",
                "#fee090",
                "#ffffbf",
                "#e0f3f8",
                "#abd9e9",
                "#74add1",
                "#4575b4",
                "#313695"];

var color = d3.scale.linear()
    .domain([60, 220]) 
    .range([colors.length-1, 0])
    .clamp(true);

var diameter = 650; 
var rect_width = 70;
var rect_height = 15;

var link_width = "1px";

var il = data.inner.length;
var ol = data.outer.length;

var inner_y = d3.scale.linear()
    .domain([0, il])
    .range([-(il * rect_height)/2, (il * rect_height)/2]);

mid = (data.outer.length/2.0)
var outer_x = d3.scale.linear()
    .domain([0, mid, mid, data.outer.length])
    .range([15, 170, 190, 355]); 

var outer_y = d3.scale.linear()
    .domain([0, data.outer.length])
    .range([0, diameter / 2 - 120]);

// setup positioning
data.outer = data.outer.map(function(d, i) { 
    d.x = outer_x(i);
    d.y = diameter/3;
    return d;
});

data.inner = data.inner.map(function(d, i) { 
    d.x = -(rect_width / 2);
    d.y = inner_y(i);
    return d;
});

function get_color(name) {
    var c = Math.round(color(name));
    if(isNaN(c))
        return '#dddddd';
    return colors[c];
}

/**
 * Can't just use d3.svg.diagonal because one edge is in normal space, the
 * other edge is in radial space. Since we can't just ask d3 to do projection
 * of a single point, do it ourselves the same way d3 would do it. 
 */
function projectX(x) {
    return ((x - 90) / 180 * Math.PI) - (Math.PI/2);
}

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {"x": d.outer.y * Math.cos(projectX(d.outer.x)), 
                                  "y": -d.outer.y * Math.sin(projectX(d.outer.x))}; })            
    .target(function(d) { return {"x": d.inner.y + rect_height/2,
                                  "y": d.outer.x > 180 ? d.inner.x : d.inner.x + rect_width}; })
    .projection(function(d) { return [d.y, d.x]; });

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

// links
var link = svg.append('g').attr('class', 'links').selectAll(".link")
    .data(data.links)
    .enter().append('path')
    .attr('class', 'link')
    .attr('id', function(d) { return d.id })
    .attr("d", diagonal)
    .attr('stroke', function(d) { return get_color(d.inner.name); })
    .attr('stroke-width', link_width);

// outer nodes
var onode = svg.append('g').selectAll(".outer_node")
    .data(data.outer)
    .enter().append("g")
    .attr("class", "outer_node")
    .attr("transform", function(d) { 
        return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; 
    })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

onode.append("circle")
    .attr('id', function(d) { return d.id })
    .attr("r", 5);

onode.append("circle")
    .attr('r', 20)
    .attr('visibility', 'hidden');

onode.append("text")
    .attr('id', function(d) { return d.id + '-txt'; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
    .text(function(d) { return d.name; });

// inner nodes
var inode = svg.append('g').selectAll(".inner_node")
    .data(data.inner)
    .enter().append("g")
    .attr("class", "inner_node")
    .attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"})
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

inode.append('rect')
    .attr('width', rect_width)
    .attr('height', rect_height)
    .attr('id', function(d) { return d.id; })
    .attr('fill', function(d) { return get_color(d.name); });

inode.append("text")
    .attr('id', function(d) { return d.id + '-txt'; })
    .attr('text-anchor', 'middle')
    .attr("transform", "translate(" + rect_width/2 + ", " + rect_height * .75 + ")")
    .text(function(d) { return d.name; });

// need to specify x/y/etc
d3.select(self.frameElement).style("height", diameter - 150 + "px");

function mouseover(d) {
    // bring to front
    d3.selectAll('.links .link')
        .sort(function(a, b) { 
            return d.related_links.indexOf(a.id); 
        }); 

    for(var i = 0; i < d.related_nodes.length; i++) {
        d3.select('#' + d.related_nodes[i]).classed('highlight', true);
        d3.select('#' + d.related_nodes[i] + '-txt').attr("font-weight", 'bold');
    }

    for(var i = 0; i < d.related_links.length; i++) {
        d3.select('#' + d.related_links[i]).attr('stroke-width', '5px'); 
        // ADDED BY ME
        d3.select('#' + d.related_links[i]).attr('fill', 'yellow');
    }
}

function mouseout(d) {      
    for(var i = 0; i < d.related_nodes.length; i++) {
        d3.select('#' + d.related_nodes[i]).classed('highlight', false);
        d3.select('#' + d.related_nodes[i] + '-txt').attr("font-weight", 'normal');
    }

    for(var i = 0; i < d.related_links.length; i++)
        d3.select('#' + d.related_links[i]).attr('stroke-width', link_width);
}

CSS:

svg {
   font: 13px sans-serif;
}

text {
   pointer-events: none;
}

.inner_node rect {
   pointer-events: all;
}

.inner_node rect.highlight {
   stroke: none;
   stroke-width: 2px;   
   fill: blue;
}

.outer_node circle {
   fill: #ffffff;       
   stroke: black;       
   stroke-width: 2px;   
   pointer-events: all;
}

.outer_node circle.highlight {
   stroke: red;         
   stroke-width: 3px;   
}

.link {
   fill: none;
}

我尝试添加 d3.select('#' + d.related_links[i]).attr('fill', 'green'); 但没有任何变化。

同样在原始示例中，它创建了一个 colors 数组，但在我的示例中不起作用。我试图删除它，当然会出现错误。

抱歉愚蠢的问题，但我才刚刚开始，我阅读了一些教程，但我不知道如何解决。

非常感谢!

Answer 1

代替

 d3.select('#' + d.related_links[i]).attr('fill', 'yellow');

应该是

d3.select('#' + d.related_links[i]).attr('stroke', 'yellow');

这是一个 fiddle :https://jsfiddle.net/8e7qmzw8/4/

检查你的 fiddle 中的 console.log。名称是城市名称。但在您链接的示例中，它们是数字:https://jsfiddle.net/8e7qmzw8/5/