javascript - 来自数据值的 D3 刻度标签

Question

我正在尝试根据来 self 的数据对象的键值在 y 轴上创建刻度标签。数据对象如下:

数据对象:

var data = [
      {name: 'E2E Tests', passed: 4, notRun: 4, failed: 0, blocked: 0, notApplicable: 0 },
      {name: '868: Services', passed: 3, notRun: 3, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '869: Services', passed: 2, notRun: 1, failed: 2, blocked: 1, notApplicable: 0 },
      {name: 'Bugs fixed', passed: 1, notRun: 1, failed: 0, blocked: 2, notApplicable: 0 },
      {name: '870: Services', passed: 2, notRun: 0, failed: 1, blocked: 0, notApplicable: 1 },
      {name: '867: Local', passed: 3, notRun: 0, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '866: Local', passed: 3, notRun: 1, failed: 0, blocked: 0, notApplicable: 0 }
];

完整代码:

var margin = { top: 10, right: 25, bottom: 30, left: 30 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var svg = d3.select('.chart')
  .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .call(responsivefy)
  .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

svg.append('rect')
  .attr('width', width)
  .attr('height', height)
  .style('fill', 'lightblue')
  .style('stroke', 'green') ;


// Y Axis
var yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0]);
var yAxis = d3.axisLeft(yScale);
svg.call(yAxis);

// X Axis
var xScale = d3.scaleTime()
  .domain([0, 8])
  .range([0, width]);

var xAxis = d3.axisBottom(xScale)
  .ticks(8)
  .tickFormat(d3.format("d"));

svg.append('g')
  .attr('transform', `translate(0, ${height})`) 
  .call(xAxis);


function responsivefy(svg) {
  var container = d3.select(svg.node().parentNode);
  var width = parseInt(svg.style('width'));
  var height = parseInt(svg.style('height'));
  var aspect = width / height;

  svg.attr('viewBox', '0 0 ' + width + ' ' + height)
     .attr('preserveAspectRatio', 'xMinYMid')
     .call(resize);

  d3.select(window).on('resize.' + container.attr('id'), resize);

  function resize() {
    var targetWidth = parseInt(container.style('width'));
    svg.attr('width', targetWidth);
    svg.attr('height', Math.round(targetWidth / aspect));
  }
}

我想使用名称值作为每个刻度的标签。到目前为止，我已经尝试了两种方法来让它发挥作用。

尝试 1:

我尝试创建一个独立的名称值数组并将其传递给我添加到 y 轴的 tickValues 方法，但没有成功:

var yLabels = data.map(d => d.name); 

var yAxis = d3.axisLeft(yScale).tickValues(yLabels);

尝试 2:

然后我尝试将以下更改添加到 y 轴:

var yAxis = d3.axisLeft(yScale)
    .tickValues(data)
    .tickFormat(d => d.name);

这看起来像是将文本添加到 svg，但它们都位于顶部并相互重叠。我觉得必须有一种简单而干净的方法来做到这一点。

Answer 1

问题出在您的秤上(您不会为此使用线性秤):

var yScale = d3.scaleBand()
.domain(["bob","Tom","Fred"]) // this is where you specify the labels
.range([height, 0]);

由于域是打印在轴标签跨度上的内容，给定范围内的某个值。轴渲染函数使用比例域。

希望此引用资料有所帮助:https://github.com/d3/d3/blob/master/API.md#scales-d3-scale

如果您有任何问题，请随时提出。