Question

我用长Y轴标签（温度范围）绘制数据。如何调整标签，使它们在旋转90度并且不会离开图形边缘时以刻度为中心？我试图使用this.getBBox（）来应用基于标签迭代的转换，但这似乎不起作用。

谢谢！

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    .axis text {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    
    var margin = {top: 100, right: 100, bottom: 100, left: 100},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var categories = {
                    temperature: ["29-30°C - Red","31-33° C - Green","> 33° C - Blue"],
                    sleep: ["7 - 8 hours", "5 - 6 hours", "4 or less hours"]
                    }
    
    var mindate = new Date(2012,0,1),
                maxdate = new Date(2012,0,31);
    
    var xScale = d3.time.scale()
            .domain([mindate, maxdate])    // values between for month of january
            .range([0, width - margin.right]);
    
    var xAxis = d3.svg.axis()
                .orient("bottom")
                .scale(xScale);
    
    var yKey = "temperature";
    var yScale = d3.scale.ordinal()
        .domain(categories[yKey])
        .rangePoints([0, height]);
    
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
    
    var svg = d3.select("body").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 + ")");
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    
    svg.append("g")
        .attr("class", "yAxis axis")
        .call(yAxis)
        .selectAll("text")
         .attr("x", 10)
         .attr("y",20)
         .attr("transform", "rotate(90)")
         .style("text-anchor", "start")
    </script>

这是我尝试过的，但这似乎并没有太多标签。我不确定如何在不使用翻译的情况下在以下函数中设置“x”。

d3.selectAll(".yAxis text")
        .attr("transform", function(d,i) {
          return "translate(" + -20 + "," + ((this.getBBox().width/(i+2))) + ")rotate(-90)"
        })

Answer 1

啊哈！答案是d3.scale.ordinal有一个填充设置，所以我所要做的就是将我的yScale改为

var yScale = d3.scale.ordinal()
            .domain(categories[yKey])
            .rangePoints([0, height],1);

 <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    .axis text {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    
    var margin = {top: 100, right: 100, bottom: 100, left: 100},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var categories = {
                    temperature: ["29-30°C - Red","31-33° C - Green","> 33° C - Blue"],
                    sleep: ["7 - 8 hours", "5 - 6 hours", "4 or less hours"]
                    }
    
    var mindate = new Date(2012,0,1),
                maxdate = new Date(2012,0,31);
    
    var xScale = d3.time.scale()
            .domain([mindate, maxdate])    // values between for month of january
            .range([0, width - margin.right]);
    
    var xAxis = d3.svg.axis()
                .orient("bottom")
                .scale(xScale);
    
    var yKey = "temperature";
    var yScale = d3.scale.ordinal()
        .domain(categories[yKey])
        .rangePoints([0, height],1);
    
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
    
    var svg = d3.select("body").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 + ")");
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    
    svg.append("g")
        .attr("class", "yAxis axis")
        .call(yAxis)
        .selectAll("text")
         .attr("x", 10)
         .attr("y",20)
         .attr("transform", "rotate(90)")
         .style("text-anchor", "middle")
    </script>

D3.js调整标签彼此更接近

1 个答案: