D3. js Поворот / нанесение гистограммы по горизонтали - PullRequest
Новая
       4

D3. js Поворот / нанесение гистограммы по горизонтали

0 голосов
/ 05 февраля 2020

Как я могу построить гистограмму снизу кода в горизонтальном направлении, а также текст в центре бара? Требуется визуализировать гистограмму, используя путь. А также чтобы значение отображалось в центре бара. 

d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
var width = 500;
var height = 500;
var svg = d3.select("#chart").append("svg")
  .attr("height",height)
  .attr("width",width);
var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .range([0,width])
  .rangeBands([0, width]); 
var mage = d3.max(data, function(d) { return d.age; });
var y = d3.scale.linear()
  .domain([0,mage])
  .range([height,0]);

svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", makeRect)
  .attr("fill","orange")
  .attr("rotate","90,0,0")
function makeRect(d,i) {
  var x0 = x(i);
  var y0 = y(d.age);
  var x1 = x(i) + x.rangeBand();
  var y1 = height;
  var p1 = x0 + " " + y0;
  var p2 = x0 + " " + y1;
  var p3 = x1 + " " + y1;
  var p4 = x1 + " " + y0;
  var l = "L";
  return "M"+p1+l+p2+l+p3+l+p4+"Z";
}
  svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("fill", "blue")
  .attr("x", function(d,i) { return x(i) + 25; })
  .attr("y", function(d) { return y(d.age/2); })
  .text(function (d) {return d.name;})
});

1 Ответ

2 голосов
/ 06 февраля 2020

Я оставлю вам возможность изменять положение текста с помощью атрибутов.

Две ноты :

  • Я удалил функцию прямоугольника, так как ее Очиститель для непосредственного использования прямоугольника.
  • Все, что вам нужно сделать, - это добиться функциональности, которую вы хотите, это обратить вспять функции генератора значений 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>
...