Question

在左下角，200和12:00PM相遇的地方，这些值会靠近在一起，看起来很拥挤。此外，点是关闭左上角的400。

我在padding: 30px尝试.tick text {}但没有运气。如何在轴路径线的刻度值之间放置一个空格？

.axis line {
  opacity: .5;
}

.x.axis path  {
  opacity: 0;
}

.y.axis path {
  opacity: 0;
} 

.curve {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.graph-sheet {
  display: flex;
  background-color: #fafafa;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
}


.large {
  width: 700px;
  height: 400px;
}

.med {
  width: 600px;
  height: 300px;
}

.small {
  width: 400px;
  height: 200px;
}

.graph-title {
  font-weight: 500;
  text-anchor: middle;
  font-size: 20px;
  font-family: 'Roboto Mono',RobotoDraft,Helvetica,Arial,sans-serif;
} 

.tick text {
  padding: 30px;
  font-size: 12px;
  fill: rgba(0,0,0,.54) !important;
}

          var graph = setGraphSize(attrs.graphSize);

          var margin = {top: 20, right: 30, bottom: 30, left: 30},
            width = graph.width - margin.left - margin.right,
            height = graph.height - margin.top - margin.bottom;

          var parseDate = d3.timeParse('%H:%M');

          // converts strings to date times
          scope.curveData.meta.forEach(function(d) {
            d.timeStamp = parseDate(d.timeStamp);
            d.glucoseLevel = +d.glucoseLevel;
          });

          var x = d3.scaleTime()

          var y = d3.scaleLinear()
            .range([height, 0]);

          var timeStampList = scope.curveData.meta.map(function (d) { return d.timeStamp; });

          // creates X axis
          var xAxis = d3.axisBottom(x)
                        .tickValues(timeStampList)
                        .tickFormat(d3.timeFormat("%I:%M %p"))

          var glucoseLevelList = getTicks('glucoseLevel', scope.curveData);
          var yAxis = d3.axisLeft(y).tickValues(glucoseLevelList).tickSizeInner(-width);

          var curve = d3.line()
            .x(function(d) { return x(d.timeStamp); })
            .y(function(d) { return y(d.glucoseLevel); })
            .curve(d3.curveCatmullRom.alpha(0.5));

          var divEl = element[0].querySelector('div');
          divEl.classList.add(attrs.graphSize);

          var svg = d3.select(divEl).append('svg')
           .attr('width', width + margin.left + margin.right)
           .attr('height', height + margin.top + margin.bottom)
           .append('g')
           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


          x.domain(d3.extent(scope.curveData.meta, function(d) { return d.timeStamp; }));
          y.domain(d3.extent(scope.curveData.meta, function(d) { return d.glucoseLevel; }));

          // Add the scatterplot
          svg.selectAll("dot")
            .data(scope.curveData.meta)
            .enter().append("circle")
            .attr("r", 3.5)
            .attr("cx", function(d) { return x(d.timeStamp); })
            .attr("cy", function(d) { return y(d.glucoseLevel); });

          // Add the X Axis
          svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis);

          // Add the Y Axis
          svg.append('g')
            .attr('class', 'y axis')
            .call(yAxis)

          // Add the value curve path.
          svg.append('path')
            .attr('class', 'curve')
            .attr('d', curve(scope.curveData.meta));

          var graphTitle = graphTitleGenerator(scope.curveData);
          svg.append("text")
            .attr("x", (width / 2))
            .attr("y", 0 - (margin.top / 4))
            .attr('class', 'graph-title')
            .text(graphTitle);

Answer 1

这是D3 v4.x.因此，您必须为y轴设置tickPadding：

var yAxis = d3.axisLeft(y)
    .tickValues(glucoseLevelList)
    .tickSizeInner(-width)
    .tickPadding(30);

D3 Chart-在刻度值和轴路径线之间放置空格

1 个答案: