Маркировка оси гистограммы SVG - PullRequest
Новая
       9

Маркировка оси гистограммы SVG

1 голос
/ 16 апреля 2020

Хотите стилизовать гистограмму с помощью D3 SVG. Прямо сейчас он содержит число на оси Y и, на оси X, метки за днем. Для каждого дня есть отметка, где я хочу отображать только первую дату недели. Как я могу показать только один раз в неделю? Код ниже: 

d3.csv("us-counties-cases.csv", function(data) {

  filteredData = data.filter(function(row) {
        return row['county'] == 'New York City';
    });

  var x = d3.scaleBand()
    .range([ 0, width])
    .domain(filteredData.map(function(d) {
      return d.date; 
    }))
    .padding(0.2);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
      .attr("transform", "translate(-10,0)rotate(-45)")
      .style("text-anchor", "end");

  // Add Y axis
  var max = d3.max(filteredData, function(d) { return d.cases; });
  var y = d3.scaleLinear()
    .domain([0, max * 1.2])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Bars
  svg.selectAll("mybar")
    .data(filteredData)
    .enter()
    .append("rect")
      .attr("x", function(d) { 
        return x(d.date); 
        })
      .attr("width", x.bandwidth())
      .attr("fill", "#b3b3b3")
      .attr("height", function(d) { 
        return height - y(0); 
      })
      .attr("y", function(d) { 
        return y(0); 
      })

  // Animation
  svg.selectAll("rect")
    .transition()
    .duration(200)
    .attr("y", function(d) { 
      return y(d.cases); 
    })
    .attr("height", function(d) { 
      return height - y(d.cases); 
    })
    .delay(function(d,i){
        return(i*50)
      })
  })

1 Ответ

0 голосов
/ 16 апреля 2020

Обычно вы можете использовать axis.tick() для установки аргументов, управляющих отображением тиков. Среди прочего, вы можете установить, сколько тиков для визуализации.

Однако, как вы можете прочитать в документации , эффект этого метода и его аргументов зависит от типа масштаба оси , Если вы используете scaleBand, axis.tick() не имеет никакого эффекта, и вы должны использовать axis.tickValues, чтобы явно установить значения тиков. Точно так же, если вы хотите изменить формат тиков, необходимо использовать axis.tickFormat.

. Для вашего конкретного случая c следующий код изменяет ось x, чтобы показывать только один тик каждые 7 дней: 

d3.axisBottom(x).tickValues(x.domain().filter( (d,i) => !(i % 7) ))
...