Question

我使用d3.js v4在我早期的静态大小的情节中有完全足够的刻度;一旦我将其调整大小，滴答和值就会从y轴上消失。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Plot Viewer</title>
    <script src="js/lib/d3.v4.min.js"></script>
    <script src="js/lib/jquery.min.js"></script>
    <style>
      .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px;
      }

      #chart {
        position: fixed;
        left: 55px;
        right: 15px;
        top: 10px;
        bottom: 55px;
      }
    </style>
  </head>
  <body>

    <div id="chart"></div>

    <script>

      var chartDiv = document.getElementById("chart");
      var svg = d3.select(chartDiv).append("svg");

      // parse the date time
      var parseTime = d3.timeParse("%m/%d %H:%M");

      function render() {

        $("svg").empty();

        // Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;

        // Use the extracted size to set the size of an SVG element.
        svg
          .attr("width", width)
          .attr("height", height);

        var margin = {top: 10, right: 15, bottom: 55, left: 55};
          width = width - margin.left - margin.right,
          height = height - margin.top - margin.bottom;

        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

        // define the line
        var line = d3.line()
          .x(function(d) { return x(d.time); })
          .y(function(d) { return y(d.solar); });

        // Get the data
        d3.csv("data_fred.csv", function(error, data) {
          if (error) throw error;

          // format the data
          data.forEach(function(d) {
            d.time = parseTime(d.time);
            d.solar = +d.solar;
          });

          // Scale the range of the data
          x.domain(d3.extent(data, function(d) { return d.time; }));
          y.domain([0, d3.max(data, function(d) { return d.solar; })]);

          // Add the valueline path.
          svg.append("path")
              .data([data])
              .attr("class", "line")
              .attr("d", line);

          // Add the X Axis
          svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x)
              .tickFormat(d3.timeFormat("%m/%d %H:%M  ")));

          // Add the Y Axis
          svg.append("g")
            .call(d3.axisLeft(y))
              .ticks(10);
        });
      } 

      render();

      // Redraw based on the new size whenever the browser window is resized
      window.addEventListener("resize", render);

    </script>
  </body>
</html>

提交者功能需要更多细节，但我没有...... 胡说胡说胡说胡说添加到填充非代码内容的字符。

蜱现在在y轴上消失了。我已将.tick属性添加到y轴，但没有欢乐。

如何让我的y轴回到图表的响应版本？ TIA

稍后发布：有人吗？我的无响应版本的代码正在绘制; ＆＃34; responsifying＆＃34;它使y轴刻度和单位消失。我几乎尝试了命令排序和放置的所有排列，但没有运气。

Answer 1

这里发生的是您的Y轴刻度被隐藏，因为它们不在视口中。您需要做的是将svg中的所有元素放在<g>包装器中，并按左边距和上边距进行翻译。

这是一个小提琴

var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");
var g = svg.append('g');

function render() {
  $('svg').empty();


  // Extract the width and height that was computed by CSS.
  var width = $('#chart').width();
  var height = $('#chart').height();

  // Use the extracted size to set the size of an SVG element.
  svg
    .attr("width", width)
    .attr("height", height);

  // set the dimensions and margins of the graph
  var margin = {
    top: 20,
    right: 20,
    bottom: 50,
    left: 40
  };
  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  // parse the date time
  var parseTime = d3.timeParse("%m/%d %H:%M");

  // set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  // define the line
  var valueline = d3.line()
    .x(function(d) {
      return x(d.time);
    })
    .y(function(d) {
      return y(d.solar);
    });

  // Get the data
  var data = [{
    'time': '11/30 04:55',
    'solar': -1.1
  }, {
    'time': '11/30 05:00',
    'solar': -1.1
  }, {
    'time': '11/30 05:05',
    'solar': -1.5
  }, {
    'time': '11/30 05:10',
    'solar': -2
  }, {
    'time': '11/30 05:15',
    'solar': 1
  }]
  // format the data
  data.forEach(function(d) {
    d.time = parseTime(d.time);
    d.solar = +d.solar;
  });

  console.log(data)

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) {
    return d.time;
  }));
  var yExtent = d3.extent(data, function(d) {
    return d.solar;
  })
  y.domain(yExtent);

  g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Add the valueline path.
  g.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", valueline);

  // Add the X Axis
  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
      .tickFormat(d3.timeFormat("%m/%d %H:%M  ")))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-45)");

  // Add the Y Axis
  g.append("g")
    .call(d3.axisLeft(y));

}

//      d3.select("svg").remove();
//      svg.remove();
//      d3.selectAll("g > *").remove()
//        d3.selectAll("chartDiv.path.line").remove();
//      d3.select("path.line").remove();
render();

// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", render);

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

快乐编码：）

Answer 2

知道了 - 轴刻度从窗口的左边缘消失 - 用转换/翻译修复：

    // Add the Y Axis
    svg.append("g")
      .attr("transform", "translate(40 ,10)")
      .call(d3.axisLeft(y));

...具有类似的x轴和匹配路径的平移。

此外，轴刻度现在出现的范围为0到1.0，因为它是一个异步操作，因为它没有被传递出文件读取循环。将svg.append引入数据读取循环使我的“正常”单位恢复到轴。

y轴刻度在d3.js v4的响应图表中消失

2 个答案: