调整d3v4条形图的g变换值

Question

transform中的<g class="ticks"</g>变得一团糟。我可以在定值方面获得帮助吗？刻度线不匹配我的柱线。我希望每个小节的底部都位于中间的刻度线。

var svg = d3.select("#main-chart svg"),
margin = {top: 20, right: 20, bottom: 100, left: 75},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);

var colours = d3.scaleOrdinal().range(["#d7857f", "#d7857f"]);

var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json(url, function(error, data) {

x.domain(data.map(function(d) {return convert_date(d.date);}));

var barWidth = width / data.length;

 let tick_vals = "";
    if(day_diff <= 30) {
      tick_vals = function(d,i){console.log(d + " == " + i); return !(i%1)}
    } 
    else if(day_diff > 30 && day_diff < 60) {
     tick_vals = function(d,i){ return !(i%2)}
   }
   else if(day_diff >= 60 && day_diff < 90) {
     tick_vals = function(d,i){ return !(i%5)}
   }
   else if(day_diff >= 90 && day_diff <= 150) {
     tick_vals = function(d,i){ return !(i%10)}
   }
   else {
    tick_vals = function(d,i){ return !(i%30)}
  }

  g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).tickValues(x.domain().filter(tick_vals)))
  .selectAll("text")  
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-45)" );

  g.append("g").call(d3.axisLeft(y).ticks(10).tickFormat(d3.format(".3s")).tickSizeInner([-width]));

  g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("x", function(d, i){ return i * barWidth + 1 })
  .attr("y", function(d) {return y(d.total_valid_subscribers); })
  .attr("width", barWidth - 1)
  .attr("height", function(d) { return height - y(d.total_valid_subscribers); })
  .attr("fill", function(d) { return colours(d.date); })
  .on("mousemove", function(d){
    tooltip
    .style("left", d3.event.pageX - 50 + "px")
    .style("top", d3.event.pageY - 70 + "px")
    .style("pointer-events", "none")
    .style("display", "inline-block")
    .html(`<h5>${convert_date(d.date)}</h5>`);
  })
  .on("mouseout", function(d){ tooltip.style("display", "none");});

}

这是我的图表当前的外观：

我更正了控制台上的一个刻度（第一个刻度），使其看起来像我想要的：

有没有办法让我所有的价格变动都出现在每个小节的底部？