javascript - 水平条形图 d3.js 中的 y 轴上未显示文本

Question

我有csv:

Vendor,Units2016,Share2016,Units2015,Share2015
Samsung,"306,446.60",20.5,"320,219.70",22.5
Apple,"216,064.00",14.4,225850.6,15.9
Huawei,"132,824.90",8.9,"104,094.70",7.3
Oppo,"85,299.50",5.7,"39,489.00",2.8
BBK Communication,"72,408.60",4.8,"35,291.30",2.5
Others,"682,313.30",45.6,"698,955.10",49.1

我在这里想要实现的是在 y 轴上显示 vendor 名称，在 x 轴上显示 Share2016 数据。

所需布局:

    var fullw = 320;
    var fullh = 240;


    var margin = {
        top: 1,
        right: 25,
        bottom: 25,
        left: 200
    }

    var widthScale = d3.scaleLinear()
        .range([0, fullw]);

    var heightScale = d3.scaleBand()
        .rangeRound([0, fullh])
        .paddingInner(0.05);



    var svg = d3.select("body")
        .append("svg")
        .attr("width", fullw + margin.left + margin.right)
        .attr("height", fullh + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")



    d3.csv("smartphones-statistics.csv", function (error, data){
        if(error){
            console.log("An error occured while loading data");
        }

        console.log(data);

        var barcolor = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){
                return +d.Share2016;
            })])
            .range(["#E6F5FF", "blue"])
            .interpolate(d3.interpolateHcl);


        widthScale.domain([0, d3.max(data, function(d){
            return +d.Share2016;
        })]);

        heightScale.domain(data.map(function(d){
            return d.Vendor;
        }));

    myArray.sort(function(a,b){                 //This will sort data
        return a[2] - b[2];         //in descending order
    })

var bars = svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", 20)
            .attr("y", function(d){
                return heightScale(d.Vendor);
            })
            .attr("width", function(d){
                return widthScale(+d.Share2016);
            })
            .attr("height", heightScale.bandwidth())
            .style("fill", function(d, i){
                return barcolor(i);
            })


        bars.append("text")
            .attr("x", 12)
            .attr("dy", "1.2em")
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.Vendor; })
            .style("fill", "#000000");
    })

我已经设法显示了条形图:

但我不知道文本是什么？我在这里做错了什么？我一直在尝试添加 yAxis = d3.axisLeft(heightScale).tickValues(data) 但它不起作用。请帮忙。

Answer 1

文本永远不会显示，因为您将它们附加到 <rect>元素。

但是，您甚至不需要将文本附加为单独的元素。由于您已经有了比例尺，只需使用轴生成器即可:

var yAxis = d3.axisLeft(heightScale);

var gX = svg.append("g")
    .attr("transform", "translate(" + margin.left + "0,)")
    .call(yAxis);

这是你的轴代码:

var csv = `Vendor,Units2016,Share2016,Units2015,Share2015
Samsung,"306,446.60",20.5,"320,219.70",22.5
Apple,"216,064.00",14.4,225850.6,15.9
Huawei,"132,824.90",8.9,"104,094.70",7.3
Oppo,"85,299.50",5.7,"39,489.00",2.8
BBK Communication,"72,408.60",4.8,"35,291.30",2.5
Others,"682,313.30",45.6,"698,955.10",49.1`;

var fullw = 320;
var fullh = 240;

var margin = {
  top: 1,
  right: 25,
  bottom: 25,
  left: 120
}

var widthScale = d3.scaleLinear()
  .range([0, fullw]);

var heightScale = d3.scaleBand()
  .rangeRound([0, fullh])
  .paddingInner(0.2);


var svg = d3.select("body")
  .append("svg")
  .attr("width", fullw + margin.left + margin.right)
  .attr("height", fullh + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var data = d3.csvParse(csv);

var barcolor = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return +d.Share2016;
  })])
  .range(["#E6F5FF", "blue"])
  .interpolate(d3.interpolateHcl);

widthScale.domain([0, d3.max(data, function(d) {
  return +d.Share2016;
})]);

heightScale.domain(data.map(function(d) {
  return d.Vendor;
}));

var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d) {
    return heightScale(d.Vendor);
  })
  .attr("width", function(d) {
    return widthScale(+d.Share2016);
  })
  .attr("height", heightScale.bandwidth())
  .style("fill", function(d, i) {
    return barcolor(i);
  });

var yAxis = d3.axisLeft(heightScale).tickSizeOuter(0);
var gX = svg.append("g")
  .attr("transform", "translate(" + margin.left + "0,)")
  .call(yAxis);

<script src="//d3js.org/d3.v4.min.js"></script>