1

我对使用 d3 相当陌生，但我想做的是制作一些网站流量的和弦图，并且我试图通过在用户单击某个组时更改路径的颜色来使其具有交互性site.here 是我的代码的样式和脚本部分：

<style type="text/css">

.group text {
  font: 11px sans-serif;
  pointer-events: none;
}

#circle circle {
fill: none;
pointer-events: all;
}
.group path {
  stroke: #000;
  fill-opacity: .5;
}

path.chord {
  stroke-width: .75;
  fill-opacity: .75;
}

#circle:hover path.fade {
display: none;
}
</style>
</head>

<body>
<script type="text/javascript">



// Chart dimensions.
var w = 600,
h = 700,
r1 = Math.min(w, h) / 2 - 4,
r0 = r1 - 20,
format = d3.format(",.3r");

// Square matrices, asynchronously loaded; credits is the transpose of sitename.
var sitename = [];

// The chord layout, for computing the angles of chords and groups.
var layout = d3.layout.chord()
.sortGroups(d3.descending)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
.padding(.04);

// The color scale, for different categories of "worrisome" risk.
var fill = d3.scale.ordinal();

// The arc generator, for the groups.
var arc = d3.svg.arc()
.innerRadius(r0)
.outerRadius(r1);

// The chord generator (quadratic Bézier), for the chords.
var chord = d3.svg.chord()
.radius(r0);

// Add an SVG element for each diagram, and translate the origin to the center.
var svg = d3.select("body").selectAll("div")
.data([sitename])
.enter().append("div")
.style("display", "inline-block")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

// Load our data file…
d3.csv("data2.csv", function(data) {
var uniqueids = {},
  array = [],
  n = 0;

// Compute a unique id for each site.
data.forEach(function(d) {
d.siteid1 = uniqueIDMaker(d.siteid1);
d.siteid2 = uniqueIDMaker(d.siteid2);
d.valueOf = value; // convert object to number implicitly
});


// Initialize a square matrix of sitename and users
for (var i = 0; i < n; i++) {
sitename[i] = [];
for (var j = 0; j < n; j++) {
  sitename[i][j] = 0;
}
}

// Populate the matrices, and stash a map from id to site.
 data.forEach(function(d) {
sitename[d.siteid1.id][d.siteid2.id] = d;
array[d.siteid1.id] = d.siteid1;
array[d.siteid2.id] = d.siteid2;
});

// For each diagram…
svg.each(function(matrix, j) {
var svg = d3.select(this);

// Compute the chord layout.
layout.matrix(matrix);

// Add chords.
svg.selectAll(".chord")
    .data(layout.chords)
  .enter().append("svg:path")
    .attr("class", "chord")
    .style("fill", function(d) { return fill(d.source.value); })
    .style("stroke", function(d) { return d3.rgb(fill(d.source.value)).darker(); })
    .attr("d", chord)
    .on("dblclick",function(){
        d3.select(this)
        .style("fill","red")
        .style("stroke","yellow")
    })
  .append("svg:title")
    .text(function(d) { return "site " + d.source.value.siteid2.name + " and site " + d.source.value.siteid1.name + " have " + format(d.source.value) + " common users"; })
    ;

// Add groups.
var g = svg.selectAll("g.group")
    .data(layout.groups)
  .enter().append("svg:g")
    .attr("class", "group");

// Add the group arc.
g.append("svg:path")
    .style("fill", function(d) { return fill(array[d.index]); })
    .attr("id", function(d, i) { return "group" + d.index + "-" + j; })
    .attr("d", arc) 

    .append("svg:title")
    .text(function(d) { return "site " + array[d.index].name + " has " + format(d.value) + "users"; });

g.append("svg:text")
    .attr("x", 6)
    .attr("dy", 15)
    .filter(function(d) { return d.value > 110; })
  .append("svg:textPath")
    .attr("xlink:href", function(d) { return "#group" + d.index + "-" + j; })
    .text(function(d) { return array[d.index].name; });
 });

function uniqueIDMaker(d) {
return uniqueids[d] || (uniqueids[d] = {
  name: d,
  id: n++
});
}

function value() {
return +this.count;
}});

</script>

任何帮助将不胜感激

http://jsfiddle.net/Rw3aK/2/是脚本的jsFiddle，不知道如何让它从文件中读取，所以这里是data2.csv的内容：

siteid1,siteid2,count,pubid1,pubid2

8,94,11132,57141,57141

201,94,10035,57141,57141

201,8,9873,57141,57141

0,94,8488,45020,57141

0,8,8258,45020,57141

0,201,7644,45020,57141

0,1,6973,45020,45020

94,1,5719,57141,45020

8,1,5670,57141,45020

1,201,5410,57141,45020

4

1 回答 1

4

我分叉了你的 jsfiddle 并将你的 CSV 数据转换为 JSON，现在在一个变量中：http data: //jsfiddle.net/mdml/K6FHW/。

我还稍微修改了您的代码，以便当您单击一个组时，所有传出的和弦都以红色突出显示。当您再次单击一个组时，和弦会变回原来的颜色。以下是相关片段：

添加和弦时，根据和弦的来源为每个和弦标记一个类

svg.selectAll(".chord")
    .data(layout.chords)
    .enter().append("svg:path")
    .attr("class", function(d){ return "chord chord-" + d.source.index; })

...

单击组时，检查该组的和弦是否突出显示。

  • 如果是这样，用默认颜色填充和弦
  • 如果没有，把和弦填成红色

  • 然后记录该组的和弦是否在变量中突出显示d.chordHighlighted

    g.append("svg:path")
...
    .attr("id", function (d, i) {
        return "group" + d.index + "-" + j;
    })
...
    .on("click", function(d){
        if (d.chordHighlighted)
            d3.selectAll(".chord-" + d.index)
                .style("fill", fill(d.value));
        else{
            d3.selectAll(".chord-" + d.index)
                .style("fill", "red");
        }
        d.chordHighlighted = d.chordHighlighted ? false : true;
    })
于 2013-11-09T20:59:31.133 回答