D3JS 条形图:如何允许重复的 x 轴标签值

D3JS Barchart : How to allow repeated x-axis label values?

本文关键字：标签 条形图 何允许 D3JS      更新时间：2023-09-26

这里是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);

它的作用是使用唯一值创建刻度，但替换刻度上的文本，以便看起来正在使用重复的值。

相关文章：