Question

This是Mike Bostock的一个例子，它是一个“简单”的蜂巢图（因为他引用了它in this article）。它有三个由此代码创建的“轴”

svg.selectAll(".axis")
    .data(d3.range(3))
  .enter().append("line")
    .attr("class", "axis")
   .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
    .attr("x1", radius.range()[0]) 
    .attr("x2", radius.range()[1]);

从第一个链接可以看出，三个“轴”形成一个圆，这似乎是通过上面代码的“变换”中的旋转以及这些angle和{{的使用来实现的。 1}}函数

degrees

问题：如果只有两个“轴”，那么如何（使用“平移”）将“轴”叠加在一起（即两条水平线彼此平行？）

在我尝试这样做的过程中，我试图移除“轴”的旋转，然后将它们垂直放置。为了停止旋转，我删除了像这样的“度”的调用

var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),

function degrees(radians) {
  return radians / Math.PI * 180 - 90;
}

我还将角度范围设置为0,0

.attr("transform", function(d) { return "rotate(" + angle(d) + ")"; })

然后，为了使轴空间化，我包括了一个像这样的“翻译”

d3.scale.ordinal().domain(["one", "two"]).range([0,0]);

结果是有一个可见的水平轴，看起来另一个存在但只有当我在它上面运行鼠标时才能检测到（并且节点和线没有被重新定位）

Answer 1

不确定这是否是你所追求的，但两个＆＃34;轴＆＃34;垂直堆叠可以通过以下方式实现：

var angle = d3.scale.ordinal()
  .domain(d3.range(3)) //<-- only calculate angles for 2 [-90, 90]
  .rangePoints([0, 2 * Math.PI]),
...
svg.selectAll(".axis")
  .data(d3.range(2)) //<-- 2 lines

<强> EDITS

你所描述的并不是真正的蜂巢情节，试图重新设计布局可能比它的价值更麻烦。如果您只想要一条线上的链接点，这里就是一个袖手旁观的实现：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  fill: none;
  stroke-width: 1.5px;
}

.axis, .node {
  stroke: #000;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.hive.min.js"></script>
<script>

var width = 500,
    height = 500;

var lineSep = 200,
    lineLen = 400,
    color = d3.scale.category10().domain(d3.range(20)),
    margin = [50,50];

var nodes = [
  {x: 0, y: .1},
  {x: 0, y: .9},
  {x: 0, y: .2},
  {x: 1, y: .3},
  {x: 1, y: .1},
  {x: 1, y: .8},
  {x: 1, y: .4},
  {x: 1, y: .6},
  {x: 1, y: .2},
  {x: 1, y: .7},
  {x: 1, y: .8}
];

var links = [
  {source: nodes[0], target: nodes[3]},
  {source: nodes[1], target: nodes[3]},
  {source: nodes[2], target: nodes[4]},
  {source: nodes[2], target: nodes[9]},
  {source: nodes[3], target: nodes[0]},
  {source: nodes[4], target: nodes[0]},
  {source: nodes[5], target: nodes[1]}
];

var nodeNest = d3.nest().key(function(d){ return d.x }).entries(nodes);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + margin[0] + "," + margin[1] + ")");

var axis = svg.selectAll(".axis")
    .data(nodeNest);
    
var g = axis
  .enter().append("g")
  .attr("class", "axis")
  .attr("transform", function(d,i) { 
    var t = "translate(0," + (i * lineSep) + ")";
    return t;
  })
  .append("line")
  .attr("x1", 0)
  .attr("x2", lineLen);

axis.selectAll(".node")
  .data(function(d){
    d.values.forEach(function(q){
      q.len = d.values.length;
    })
    return d.values;
  })
  .enter().append("circle")
  .attr("class", "node")
  .attr("cx", function(d, i, j) { 
    d.cx = ((i + 0.5) * (lineLen / d.len));
    d.cy =  (j * lineSep);
    return d.cx;
  })
 .attr("r", 5)
 .style("fill", function(d) { return color(d.x); });
 
svg.selectAll(".link")
  .data(links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", function(d){
    console.log(d);
    var p = "";
    p += "M" + d.source.cx + "," + d.source.cy;
    p += "Q" + "0," + ((margin[1] / 2) + (lineSep/2));
    p += " " + d.target.cx + "," + d.target.cy;
    return p;
  })
  .style("stroke", function(d) { 
    return color(d.source.x); 
  });

function degrees(radians) {
  return radians / Math.PI * 180 - 90;
}

</script>

＆＃13;

将轴水平堆叠在一起

1 个答案: