Question

我正在使用d3.js来绘制条形图。我想在两个输入值之间显示条形图，但是以字符串值的形式显示，而不是x轴中的整数值。

[！[我想要实现的一个例子] [1]] [1]

var y-axis = ['Accessories'，'Audiophile'，'Camera＆amp; Photo'，'Cell Phones'，'Computers'，'eBook Readers'];

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

我使用的参考网址是[D3 js简单水平条形图] [2]

代码包含以下功能： 1）使用D3 js和自定义x轴标签的水平条 2）以文本换行显示x轴线：（01/01/2016生产开始日期） 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等）的值。

请记住保留原始比例（它是用于矩形的比例）。

使用d3 js的水平条形图

1 个答案: