我需要在日食形状的d3中画一个和弦而不是圆形

时间:2015-11-02 12:23:46

标签: javascript json d3.js chord-diagram

这是我的示例js文件,我需要绘制一个和弦,但是在日食形状而不是圆形。其次,我需要知道在创建和弦图时什么是矩阵使用,我们能够在这里提到简单的json文件(不使用矩阵)和http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3。因为在和弦的每个例子中都有一些矩阵用于绘制它。我是d3的新手,我需要学习很多东西。任何人都可以帮助它真的很感激

var outerRadius = 500 / 2,
innerRadius = outerRadius - 100;

var fill = d3.scale.category20c();

var chord = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);

var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20);

var svg = d3.select('#content').append("svg")
.attr("width", outerRadius * 2)
.attr("height", outerRadius * 2)
.append("g")
.attr("transform", "translate(" + outerRadius + "," + outerRadius +      

")");


d3.json("readme.json", function(error, imports) {
if (error) throw error;

var indexByName = d3.map(),
  nameByIndex = d3.map(),
  matrix = [],
  n = 0;

// Returns the Flare package name for the given class name.
function name(name) {
return name.substring(0, name.lastIndexOf(".")).substring(6);
}

// Compute a unique index for each package name.
imports.forEach(function(d) {
if (!indexByName.has(d = name(d.name))) {
  nameByIndex.set(n, d);
  indexByName.set(d, n++);
}
});

 // Construct a square matrix counting package imports.
 imports.forEach(function(d) {
  var source = indexByName.get(name(d.name)),
    row = matrix[source];
  if (!row) {
  row = matrix[source] = [];
  for (var i = -1; ++i < n;) row[i] = 0;
}
  d.imports.forEach(function(d) { row[indexByName.get(name(d))]++; });
  });

 chord.matrix(matrix);

 var g = svg.selectAll("g.group")
   .data(chord.groups())
   .enter().append("svg:g")
   .attr("class", "group")

 .on("mouseover", fade(.02))
    .on("mouseout", fade(.80));
 //  .on("mouseover", mouseover);
   //.on("mouseout", fade(1));

  g.append("svg:path")
    .style("stroke", "none")
    .style("fill", function(d) { return fill(d.index); })
    .attr("d", arc);
/* g.append("path")
  .style("fill", function(d) { return fill(d.index); })
  .style("stroke", function(d) { return fill(d.index); })
  .attr("d", arc);*/

    g.append("text")
    .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
    .attr("dy", ".35em")
    .attr("transform", function(d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
    + "translate(" + (innerRadius + 26) + ")"
    + (d.angle > Math.PI ? "rotate(180)" : "");
    })
   .style("text-anchor", function(d) { return d.angle > Math.PI ?   "end" : null; })
  .text(function(d) { return nameByIndex.get(d.index); });

  svg.selectAll(".chord")
  .data(chord.chords)
 .enter().append("path")
  .attr("class", "chord")
  .style("stroke", function(d) { return  
  d3.rgb(fill(d.source.index)).darker(); })
  .style("fill", function(d) { return fill(d.source.index); })
//.style("opacity", 1)
  .attr("d", d3.svg.chord().radius(innerRadius));

 });


  d3.select(self.frameElement).style("height", outerRadius * 5 +   "px");

1 个答案:

答案 0 :(得分:0)

[...]
int result = roller.roll()
System.out.println(i +"/"+ result +"/"+ count);

if (result == 7)
{
    count++;
    //System.out.println(roller.roll() +"/"+count );
}
[...]