带有x + y轴的d3js条形图：x轴值分布

Question

我正在尝试显示具有x和y轴的垂直条形图。我得到了带有y轴的条形图，但是我在x轴上苦苦挣扎。

x轴文本标签与条形图的宽度均等分布，但是：即使我指定了[ C0]和scaleBand。

我的代码：

domain

我已经在这里检查：

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg class="v5chart" width="960" height="500"></svg>

<style>
/*Rectangle bar class styling*/
.bar {
  fill: #0080FF
}
.bar:hover {
  fill: #003366
}

/*Text class styling*/
.text {
  fill: white;
  font-family: sans-serif
}
</style>

<script>

////VERTICAL BAR CHART WITH SVG AND NAMES
// Create data array of values to visualize
var dataArray = [{ "Player": "John Doe", "Points": 23 }, { "Player": "Jane Doe", "Points": 13 }, { "Player": "Mary Jane", "Points": 21 }, { "Player": "Debasis Das", "Points": 14 }, { "Player": "Nishant", "Points": 37 }, { "Player": "Mark", "Points": 15 }, { "Player": "Andrew", "Points": 18 }, { "Player": "Simon", "Points": 34 }, { "Player": "Lisa", "Points": 30 }, { "Player": "Marga", "Points": 20 }];

// Create variable for the SVG
var canvas = d3.select(".v5chart1").append("g").attr("transform", "translate(20,30)");

var canvasWidth = 500;


var maxValue = d3.max(dataArray, function (d) { return d.Points; });
var canvasHeight = maxValue*10;

var heightScale = d3.scaleLinear()
    .domain([0, d3.max(dataArray, function (d) { return d.Points; })])
    .range([canvasHeight, 0]); //use max value (37) * 10

var y_axis = d3.axisLeft()
    .scale(heightScale);

var x = d3.scaleBand()
    .rangeRound([0, canvasWidth], .1);

x.domain(dataArray.map(function (d) { return d.Player; }));

var x_Axis = d3.axisBottom(x);

// Select, append to SVG, and add attributes to rectangles for bar chart
canvas.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("height", function (d, i) { return (d.Points * 10) })
    .attr("width", canvasWidth/dataArray.length)    
    .attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) })
    .attr("y", function (d, i) { return canvasHeight - (d.Points * 10) });

// Select, append to SVG, and add attributes to text
canvas.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function (d) { return d.Points })
    .attr("class", "text")
    .attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) + (canvasWidth / dataArray.length)/2 })
    .attr("y", function (d, i) { return canvasHeight + 20 - (d.Points * 10) });



canvas.append("g")
    .attr("transform", "translate(0,0)")
    .call(y_axis);

canvas.append("g")
    .attr("transform", "translate(0," + canvasHeight + ")")
    .call(x_Axis)
    .selectAll("text")
    .attr("x",40)
    .attr("transform", function (d) {
        return "rotate(65)"
    });

</script>

Answer 1

您应该已经正确阅读了提供的链接上的https://www.d3-graph-gallery.com/graph/custom_axis.html示例：

• [scaleBand提供了一种方便的scaleBand方法，为您提供每个小节的宽度
• bandwidth()中的想法od轴是您不需要自己进行计算，因此，在您的情况下，您只需将播放器名称传递给d3js函数，它将为您进行坐标计算。] >
• x计算同样适用，但我让您自己弄清楚，一点都不难。
• 关于y的另一件事，您使用的是scaleBand方法，对此我并不熟悉，但是如果您将rangeRound()方法与range()结合使用，就像在链接的示例中一样，则通过调整填充值可以控制条的宽度，而不会影响x轴。值越高，条形越细，条形之间的空间越大。

padding()
////VERTICAL BAR CHART WITH SVG AND NAMES
        // Create data array of values to visualize
        var dataArray = [{ "Player": "John Doe", "Points": 23 }, { "Player": "Jane Doe", "Points": 13 }, { "Player": "Mary Jane", "Points": 21 }, { "Player": "Debasis Das", "Points": 14 }, { "Player": "Nishant", "Points": 37 }, { "Player": "Mark", "Points": 15 }, { "Player": "Andrew", "Points": 18 }, { "Player": "Simon", "Points": 34 }, { "Player": "Lisa", "Points": 30 }, { "Player": "Marga", "Points": 20 }];
    
        // Create variable for the SVG
        var canvas = d3.select(".v5chart").append("g").attr("transform", "translate(20,30)");
    
        var canvasWidth = 500;
    
        var maxValue = d3.max(dataArray, function (d) { return d.Points; });
    
        var heightScale = d3.scaleLinear()
            .domain([0, d3.max(dataArray, function (d) { return d.Points; })])
            .range([maxValue * 10, 0]); //use max value (37) * 10
    
        var y_axis = d3.axisLeft()
            .scale(heightScale);
    
        var x = d3.scaleBand()
            .range([0, canvasWidth]).padding([0.1]);
    
        x.domain(dataArray.map(function (d) { return d.Player; }));
       
        var x_Axis = d3.axisBottom(x);
    
        // Select, append to SVG, and add attributes to rectangles for bar chart
        canvas.selectAll("rect")
            .data(dataArray)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("height", function (d, i) { return (d.Points * 10) })
            .attr("width", x.bandwidth())    
            .attr("x", function (d, i) { return x(d.Player); })
            .attr("y", function (d, i) { return 370 - (d.Points * 10) });
    
        // Select, append to SVG, and add attributes to text
        canvas.selectAll("text")
            .data(dataArray)
            .enter().append("text")
            .text(function (d) { return d.Points })
            .attr("class", "text")
            .attr("text-anchor", "middle")
            .attr("x", function (d, i) { return x(d.Player)+x.bandwidth()/2; })
            .attr("y", function (d, i) { return 390 - (d.Points * 10) });
    
    canvas.append("g")
        .attr("transform", "translate(0,0)")
        .call(y_axis);

    canvas.append("g")
        .attr("transform", "translate(0,370)")
        .call(x_Axis);
.bar {
      fill: #0080FF
    }
    .bar:hover {
      fill: #003366
    }
    
    /*Text class styling*/
    .text {
      fill: white;
      font-family: sans-serif
    }