CODEWITHSUNDEEP
javascriptd3.js
Aaron Balthaser
Aaron Balthaser

Reputation: 2622

D3 tick labels from data values

Im trying to create tick labels on the y axis from key values coming from my data object. The data object is as follows:

Data Object:

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 }
];

Complete Code:

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));
  }
}

I would like to use the name value as a label for each tick. So far I have tried two ways to get this to work.

Attempt 1:

I tried creating an independent array of the name values and passing it into the tickValues method which I added to the y axis, didn't work:

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

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

Attempt 2:

Then I tried adding the following changes to the y axis:

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

This looks like it added the text to the svg but they are all positioned at the top overlapping one another. I feel like there has to be an easy and cleaner way to do this.

enter image description here

Upvotes: 1

Views: 2638

Answers (1)

George Pasquali
George Pasquali

Reputation: 358

The problem is in your scale(you will not use a linear scale for this one):

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

As the domain is what gets printed on the axis label spans, given a certain value from the range. The Axis rendering function uses the domain of the scale.

Hope this reference helps: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale

If you have any questions feel free to ask.

Upvotes: 1

Related Questions