Question

我怎么可能从下面的代码沿水平方向绘制条形图，并在条形的中心处绘制文本？要求是使用路径可视化条形图。并在条形的中心显示值。

'"datetime.date.today()" + quit()'

Answer 1

我将留给您使用属性来调整文本位置。

两个笔记：

我删除了rect函数，因为它的清洁器可以直接使用rect。
您要做的就是实现您想要的功能反转x()和y()值生成器函数。

var width = 500;
  var height = 500;
  var svg = d3.select("#graphic").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");

  d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
    var x = d3.scale.linear()
      .range([0, width])
      .domain([0, d3.max(data, function (d) {
          return d.age;
      })]);

    var y = d3.scale.ordinal()
      .rangeRoundBands([height, 0], .1)
      .domain(data.map(function (d) {
          return d.name;
      }));
    //make y axis to show bar names
    var yAxis = d3.svg.axis()
      .scale(y)
      //no tick marks
      .tickSize(0)
      .orient("left");

    var gy = svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("g");
    //append rects
    bars.append("rect")
      .attr("class", "bar")
      .attr("y", function (d) {
          return y(d.name);
      })
      .attr("fill","blue")
      .attr("height", y.rangeBand())
      .attr("x", 0)
      .attr("width", function (d) {
          return x(d.age);
      });

      bars.append("text")
      .attr("class", "label")
      //y position of the label is halfway down the bar
      .attr("y", function (d, i) {
          console.log();
          return +(y(d.name) + y.rangeBand() / 2 + 4 );
      })
      //x position is 3 pixels to the right of the bar
      .attr("x", function (d, i) {
          return +x(d.age);
      })
      .attr("text-anchor",'start')
      .attr('transform', (d) => {
        console.log();
        return `rotate(90 ${x(d.age) - 15} ${(y(d.name))})`
      })
      .attr('fill', '#FFF')
      .text(function (d) {
          return d.name;
      });
  });

<html>
<head>
<title> Learning D3 Js</title>
</head>
<body>
<div id = "chart"></div>
<div id = "graphic"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> </script>
</body>
</html>

更新，我想这就是您想要的名称：

var margin = {top: 20, right: 100, bottom: 20, left: 10};

var width = 500 - margin.left,
  height = 500 - margin.top - margin.bottom;

// var width = 500 - 50;
// var height = 500 - 50;
var svg = d3.select("#graphic").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
  var x = d3.scale.linear()
    .range([0, width - 100])
    .domain([0, d3.max(data, function (d) {
        return d.age;
    })]);

  var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .1)
    .domain(data.map(function (d) {
        return d.name;
    }));
  //make y axis to show bar names
  var yAxis = d3.svg.axis()
    .scale(y)
    //no tick marks
    .tickSize(0)
    .orient("left");

  var gy = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)

  var bars = svg.selectAll(".bar")
      .data(data)
      .enter()
      .append("g");
  //append rects
  bars.append("rect")
    .attr("class", "bar")
    .attr("y", function (d) {
        return y(d.name);
    })
    .attr("fill","blue")
    .attr("height", y.rangeBand())
    .attr("x", 0)
    .attr("width", function (d) {
        return x(d.age);
    });

    bars.append("text")
    .attr("class", "label")
    //y position of the label is halfway down the bar
    .attr("y", function (d, i) {
        console.log();
        return +(y(d.name) + y.rangeBand() / 2 + 4 );
    })
    //x position is 3 pixels to the right of the bar
    .attr("x", function (d, i) {
        return +x(d.age);
    })
    .attr("text-anchor",'start')
    .text(function (d) {
        return d.name;
    });
});

<html>
<head>
<title> Learning D3 Js</title>
</head>
<body>
<div id = "chart"></div>
<div id = "graphic"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> </script>
</body>
</html>

D3.js水平旋转/绘制条形图

1 个答案: