使用d3的水平條形圖js

Question

我使用d3.js繪製條形圖。我想在兩個輸入值之間顯示條形圖，但以字符串值的形式顯示，而不是x軸上的整數值。

[！[什麼我想才達到] [1]的一個例子] [1]

變種y軸= [ '配件'， '發燒'， '相機&照片'，「細胞電話'，'電腦'，'電子書閱讀器'];

var x-axis = ['development'，'design'，'testing'，'UAT'，'LiveDeployment'];

我所使用

參考URL是[D3 JS簡單水平條形圖] [2]下面

代碼家道設有： 1）使用單槓D3 JS和自定義x軸標籤 2）顯示X - 軸行文本換行：（2016年1月1日生產開始日） 3）顯示y軸行文本換行（類別1Category 1Category 1Category 1）

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

data = [ 
    {label:"Category 1Category 1Category 1", value:25}, 
    {label:"Category 2", value:50}, 
    {label:"Category 3", value:100}, 
    {label:"Category 4", value:75}, 
    {label:"Category 5", value:40}, 
    {label:"Category 6", value:20} 
]; 

var axisMargin = 10, 
margin = 20, 
valueMargin = 2, 
width = parseInt(d3.select('#barchart').style('width'), 9), 
height = parseInt(d3.select('body').style('height'), 9), 
barHeight = (height-axisMargin-margin*2)* 0.6/data.length, 
barPadding = (height-axisMargin-margin*2)*0.4/data.length, 
data, bar, svg, scale, scale2, xAxis, labelWidth = 0; 

max = d3.max(data, function(d) { return d.value; }); 

svg = d3.select('#barchart') 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height); 


bar = svg.selectAll("g") 
     .data(data) 
     .enter() 
     .append("g"); 

bar.attr("class", "bar") 
     .attr("cx",0) 
     .attr("transform", function(d, i) { 
      return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")"; 
     }); 

bar.append("text") 
     .attr("class", "label") 
     .attr("y", barHeight/2) 
     .attr("dy", ".35em") //vertical align middle 
     .text(function(d){ 
      return d.label; 
     }).each(function() { 
      labelWidth = 150; //Math.ceil(Math.max(labelWidth, this.getBBox().width)); 
     }) 
     .call(wrap, 150); 


scale = d3.scale.linear() 
     .domain([0, max]) 
     .range([0, width - margin*2 - labelWidth]); 

/*scale = d3.scale.linear() 
     .domain([0, max]) 
     .range([0, width - margin*2 - labelWidth]); 

xAxis = d3.svg.axis() 
     .scale(scale) 
     .tickSize(-height + 2*margin + axisMargin); 
     .orient("bottom");*/ 

var scale2 = d3.scale.ordinal() 
     .domain(["01/01/2016 Production Start Date", "01/01/2016 Production End Date", "Transcoding", "Encryption", "Published", "Published Release Date"]) 
     .rangePoints([0, width - margin*2 - labelWidth]); 

var xAxis = d3.svg.axis() 
     .scale(scale2) 
     .tickSize(-height + 2*margin + axisMargin) 
     .orient("bottom");   

bar.append("rect") 
    .attr("transform", "translate("+labelWidth+", 0)") 
    .attr("height", barHeight) 
    .attr("width", function(d){ 
     return scale(d.value); 
}); 

bar.append("text") 
    .attr("class", "value") 
    .attr("y", barHeight/2) 
    .attr("dx", -valueMargin + labelWidth) //margin right 
    .attr("dy", ".35em") //vertical align middle 
    .attr("text-anchor", "end") 
    .text(function(d){ 
      return (d.value+"%"); 
     }) 
    .attr("x", function(d){ 
     var width = this.getBBox().width; 
     return Math.max(width + valueMargin, scale(d.value)); 
}); 

svg.insert("g",":first-child") 
     .attr("class", "axisHorizontal") 
     .attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")") 
     .call(xAxis) 
     .selectAll(".tick text") 
     .call(wrap, 100); 

Answer 1

你當然可以格式化蜱，但有一個簡單的解決方法：創建另一個規模只是爲蜱，並稱之爲替代規模爲你的x軸：

var xScaleString = d3.scale.ordinal() 
     .domain(["design", "development", "testing", "UAT"]) 
     .rangePoints([0, width]); 

使用這種非同尋常做法的好處是，你可以傳播琴絃沿x軸你想要的方式。缺點是你可能沒有完全匹配你的原始比例值（10,20,30等）。

請記住保留您的原始比例（這是用於矩形的比例）。