Question

我有一个看起来很好的折线图。数据集主要是具有一个大峰值的随机数据。第二个数据集只是每个值的log2。我可以在两者之间转换，看起来很棒。 y轴也在转换。但该线的规模并未转变。不确定如何以正确的比例更新线路。

$(function() {
  var margin = { top: 300, right: 100, bottom: 100, left: 100 },
  width = 1400 - margin.right - margin.left,
  height = 1080 - margin.top - margin.bottom;

var parseTime = d3.timeParse("%H:%M:%S");
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var log2y = d3.scaleLinear().range([height, 0]);


var valueline = d3.line()
  .curve(d3.curveMonotoneX)
  .x(function (d) { return x(d.date); })
  .y(function (d) { return y(d.value); });

var log2valueline = d3.line()
  .x(function (d) { return x(d.date); })
  .y(function (d) { return y(Math.log2(d.value)); });

var svg = d3.select("body").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 + ")");

d3.select("body").attr("align", "center");

d3.csv("data.csv", function (error, data) {
  if (error) {
    throw error;
  }
  var log2data = [];
  var log10data = [];
  data.forEach(function (d, index) {
    d.date = parseTime(d.date);
    d.value = +d.value;
    log2data[index] = { "date": d.date, "value": Math.log2(+d.value) };
    log10data[index] = { "date": d.date, "value": Math.log10(+d.value) };
  });

  x.domain(d3.extent(data, function (d) { return d.date; }));
  y.domain([0, d3.max(data, function (d) { return d.value; })]);
  log2y.domain([0, d3.max(log2data, function (d) { return d.value; }) ]);
  svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", valueline);

  svg.append("g")
    .attr("class", "xaxis")
    .attr("class", "chart")
    .attr("transform", "translate(0, " + height + ")")
    .call(d3.axisBottom(x).ticks(d3.timeMinute.every(10)));

  var yaxis = svg.append("g")
    .attr("class", "yaxis")
    .attr("class", "chart")
    .call(d3.axisLeft(y).ticks(5));

  yaxis
    .transition().duration(500).delay(2000)
    .call(d3.axisLeft(log2y).ticks(4));

  svg.selectAll("path")
    .data([log2data])
    .transition().duration(500).delay(2000)
    .attr("d", valueline);
});

});

所以这是过渡前的图表：

以下是过渡后的图表：

从Harpal添加更新，我看到：

Answer 1

这是因为新线仍在使用旧比例（valueline）

改变这个：

  svg.selectAll("path")
    .data([log2data])
    .transition().duration(500).delay(2000)
    .attr("d", valueline);

到此：

  svg.selectAll("path")
    .data([log2data])
    .transition().duration(500).delay(2000)
    .attr("d", log2valueline);

Answer 2

因此，与许多事情一样，解决方案是散步，吃点东西，然后带着新鲜的外表回归。我根据迄今为止所学到的内容重新编写了它，并提供了一个有效的解决方案：

$(function () {

  var margin = { top: 300, right: 100, bottom: 100, left: 100 },
    winwidth = $(window).width(),
    winheight = $(window).height(),
    width = winwidth - margin.right - margin.left,
    height = winheight - margin.top - margin.bottom,
    x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]);

  var parseTime = d3.timeParse("%H:%M:%S");

  var valueline = d3.line()
    .curve(d3.curveMonotoneX)
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.value); });

  var svg = d3.select('body').append('svg')
    .attr("width", winwidth)
    .attr("height", winheight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var path = svg.append("path");
  var xaxis = svg.append("g")
    .attr("class", "xaxis")
    .attr("class", "chart")
    .attr("transform", "translate(0, " + height + ")");

  var yaxis = svg.append("g")
    .attr("class", "yaxis")
    .attr("class", "chart");

  function step1(sourcedata) {
    var data = sourcedata.data;
    var y = d3.scaleLinear().range([height, 0]);
    y.domain([0, d3.max(data, function (d) { return Math.log2(d.value); })]);

    valueline = d3.line()
      .curve(d3.curveMonotoneX)
      .x(function (d) { return x(d.date); })
      .y(function (d) { return y(Math.log2(d.value)); });

    path
      .data([data])
      .transition()
      .attr("class", "line")
      .attr("d", valueline);

    yaxis
      .transition()
      .call(d3.axisLeft(y).ticks(4));
  }

  d3.select("body").attr("align", "center");

  d3.csv("data.csv", function (error, data) {
    if (error) {
      throw error;
    }

    data.forEach(function (d) {
      d.date = parseTime(d.date);
      d.value = +d.value;
    });

    x.domain(d3.extent(data, function (d) { return d.date; }));
    y.domain([0, d3.max(data, function (d) { return d.value; })]);

    path
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

    xaxis
      .attr("transform", "translate(0, " + height + ")")
      .call(d3.axisBottom(x).ticks(d3.timeMinute.every(10)));

    yaxis.call(d3.axisLeft(y).ticks(5));

    $("#rescale").click(data, step1);
  });
});

图表的工作原理如下：

尝试将d3v4线图数据从一个数据集转换为具有不同比例的数据集

2 个答案: