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 に変換しました。変数はdatahttp://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 に答える