如何創建水平塊堆和對齊的標籤不同

D3 Stackbar

正如你所看到的圖表，我是在正確放置標籤的任何困難排列

至於我能得到（分別爲條的左邊和右邊的角落）...

var cxNext, data, height, labelScale, margin, parentHeight, parentWidth, percentScale, svg, width, xScale; 
 

 
parentWidth = document.body.clientWidth; 
 

 
parentHeight = document.body.clientHeight; 
 

 
margin = { 
 
    top: 0, 
 
    right: 0, 
 
    bottom: 0, 
 
    left: 0 
 
}; 
 

 
width = parentWidth - margin.left - margin.right; 
 

 
height = 700 - margin.top - margin.bottom; 
 

 
data = [{ 
 
    label: "PRODUCT 1", 
 
    percent: 0.5 
 
}, { 
 
    label: "PRODUCT 2", 
 
    percent: 0.5 
 
}]; 
 

 
xScale = d3.scale.linear().range([0, width]).domain([0, 100]); 
 

 
labelScale = d3.scale.ordinal().domain(data.map(function(p) { 
 
    return p.label; 
 
})).rangeRoundBands([0, width]); 
 

 
cxNext = 0; 
 

 
data.forEach(function(d) { 
 
    d.cx = cxNext; 
 
    return cxNext = xScale(d.percent * 100); 
 
}); 
 

 
percentScale = d3.scale.ordinal().domain(data.map(function(d) { 
 
    return d.percent * 100 + "%"; 
 
})).rangeRoundBands([0, width]); 
 

 
svg = d3.select("#chart").append("svg").attr({ 
 
    width: width + margin.left + margin.right, 
 
    height: height + margin.top + margin.bottom 
 
}); 
 

 
svg.selectAll(".bar").data(data).enter().append("rect").attr({ 
 
    "class": "bar", 
 
    width: function(d) { 
 
    return xScale(d.percent * 100); 
 
    }, 
 
    height: height, 
 
    x: function(d) { 
 
    return d.cx; 
 
    }, 
 
    y: function(d) { 
 
    return 0; 
 
    }, 
 
    fill: function(d, i) { 
 
    return "rgb(0, " + ((i + 10) * 15) + ", 0)"; 
 
    } 
 
}); 
 

 
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + (height - 40) + ")").call(d3.svg.axis().scale(labelScale)); 
 

 

 
/* 
 
svg.append("g") 
 
    .attr("class", "x axis percent") 
 
    .attr("transform", "translate(0," + (height-65) + ")") 
 
    .call d3.svg.axis().scale(percentScale) 
 
*/

.bar:hover { fill: green; } 
 

 
.axis { 
 
    font: 12px sans-serif; 
 
    fill: white; 
 
    font-weight: bold; 
 
} 
 
.percent { font: 20px sans-serif; } 
 
.axis path, .axis line { fill: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="chart"></div>

來源

2014-10-02 ridermansb

難道你不需要簡單地將位置設置到bar和'text-anchor'的邊緣嗎？ – 2014-10-02 19:15:15

如何做到這一點？每個文本必須以不同的方式排列（一個是正確的，另一個是左邊的）。另一個細節，如何在軸上應用錨點？ – ridermansb 2014-10-02 19:25:55

那你到底想要什麼？你的照片有酒吧和標籤，沒有軸？此外，你有三個比例尺，但只使用其中的一個。他們的意思是什麼？ – 2014-10-02 19:57:46

如果你恰好有兩條槓，很容易 - 所有你需要做的是設置的座標和文字錨取決於它是否是第一或第二個標籤：

svg.selectAll("text").data(data).enter().append("text").attr({ 
    x: function(d, i) { 
    return i == 1 ? d.cx + 10 : xScale(d.percent * 100) - 10; 
    }, 
    "text-anchor": function(d, i) { 
    return i == 1 ? "start" : "end"; 
    }, 
    y: height - 10 
}).text(function(d) { return d.label ; });

完成演示here。

來源

2014-10-03 13:34:24

如何創建水平塊堆和對齊的標籤不同

回答

相關問題