水平堆疊軸彼此

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和degrees功能

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

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

問題：如果只有兩個「軸」，如何會是可能的（使用「翻譯」）來堆疊「軸」上的每個的頂其他（即兩條平行的水平線？

在試圖做到這一點時，我嘗試去除「軸」的旋轉，然後將它們垂直放置。要停止轉動，我刪除調用「度」這樣

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

和我還設置角度的範圍是0,0

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

然後，對空間的軸，我包括一個「翻譯」這樣

.attr("transform", function(d) {return "translate(" + width /2 + "," + height/d + ")"});

其結果是，有一個可見的水平軸線，並且它似乎另一個存在，但是唯一可檢測到，當我在它（以及節點和線路運行鼠標尚未存儲提一下）

來源

2015-12-12 Leahcim

不知道這是否是你所追求什麼，但兩個「軸」垂直堆疊可以實現：

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

什麼是你所描述的是不是真的蜂房情節，並試圖重新佈局佈局可能更麻煩，那麼它是值得的。如果你只是想在一條線上的鏈接點，這裏是一個現成的，袖口實現：

<!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>

來源

2015-12-12 14:57:42 Mark

我的誤解抱歉，但什麼，我其實追求的是它們堆疊水平方向（即兩條水平線堆疊在彼此的頂部，間隔在兩者之間）。我玩了你的代碼，並不知道（部分原因是我不確定'.rangePoints（[0，2 * Math.PI]）'是否意味着確定軸或節點的角度。你告訴我如何橫向堆疊它們非常感謝你 – Leahcim

@Leahcim，看到更新的答案。 – Mark

水平堆疊軸彼此

回答

相關問題