![](/img/trans.png)
[英]In d3js, is it possible to transition a fixed range of values on x-axis?
[英]D3JS Barchart : How to allow repeated x-axis label values?
這是JSFiddle
請看一下函數drawBarchart();
注意:在我的示例中,當xData值被重命名並使其唯一時,所有4條都顯示出來,但是當值相同時被省略,我知道這是預期的行為,但是我必須允許重復的值。請幫助..
碼:
$(document).ready(function(){
var dataArray = [
{
"xData" : "Repeat",
"yData" : 38
},
{
"xData" : "Unique",
"yData" : 27
},
{
"xData" : "Repeat",
"yData" : 27
},
{
"xData" : "Repeat",
"yData" : 29
} ];
drawBarchart("graph",dataArray,"count",700,400);
}
);
function drawBarchart(containerId, dataArray, yAxisText, chartAreaWidth,
chartAreaHeight) {
var margin = {
top : 20,
right : 20,
bottom : 30,
left : 40
}, width = chartAreaWidth - margin.left - margin.right, height = chartAreaHeight
- margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .1);
var y = d3.scale.linear().range([ height, 0 ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
//var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
var yAxis = d3.svg.axis().scale(y).orient("left");
var svg = d3.select("#" + containerId).append("svg").attr("width",
width + margin.left + margin.right).attr("height",
height + margin.top + margin.bottom).append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(dataArray.map(function(d) {
return d.xData;
}));
y.domain([ 0, d3.max(dataArray, function(d) {
return d.yData;
}) ]);
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr(
"transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style(
"text-anchor", "end").text(yAxisText);
svg.selectAll(".bar").data(dataArray).enter().append("rect")
.attr("class", "bar").attr("x", function(d) {
return x(d.xData);
}).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.yData);
}).attr("height", function(d) {
return height - y(d.yData);
});
function type(d) {
d.yData = +d.yData;
return d;
}
}
您可以通過不為x軸使用刻度來做到這一點。 比例尺的重點是將輸入值映射到輸出,即相同的輸入將為您提供相同的輸出。 鑒於在這種情況下這不是您想要的,因此不需要刻度。
您可以根據數據中的索引計算每個條形的位置:
.attr("x", function(d, i) {
return i * width/dataArray.length;
})
每個條的寬度可以類似的方式計算。 對於文本標簽,您必須手動添加。 在此處完成jsfiddle。
您必須在比例尺上使用唯一值,因為它將“映射”這些值。 不過,我們將修改刻度線上的文本,並使您的圖形顯示其具有重復的值。
在x比例尺定義上方添加以下內容(var x = ...):
// Rewrite xData and prepend index -> xData: "Repeat0"
dataArray = dataArray.map(function(d,i){d.xData = d.xData +i; return d});
// Remove the index from the ticks -> xData: "Repeat0" -> "Repeat"
var adjustTicks = function(){
var xaxisgroup = this.node();
var ticks = xaxisgroup.children;
for (var i = 0; i < ticks.length; i++) {
if(ticks[i].localName == 'path'){continue; }
var tick_text = d3.select(ticks[i].children[1]);
tick_text.text(tick_text.text().substring(0, tick_text.text().length - 1))
};
}
然后,。 當您實際繪制比例時,調用調用方法,將AdjustTicks作為參數傳遞,如下所示:
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis).call(adjustTicks);
它的作用是使用唯一值創建刻度,但替換刻度上的文本,因此似乎正在使用重復的值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.