D3：两个具有独立变焦行为的x轴

Question

我希望在我的时间比较图表（TimeScale）中有两个独立的x轴，并且有两个实现缩放行为的问题。我想d3独立计算两个轴的x-Domain - 这将是完美的。但是，如何将每个轴的两个缩放行为绑定（并调用）到我的一个＆＃39; -Element（.d3-draw-area）？

我有两个轴的监听器，但只有＆＃34; Master-Axis＆＃34;是（逻辑上）被计算：

d3.select(".d3-draw-area").call(d3.behavior.zoom()
            .on('zoom' + ".x" + self._getXAxisMaster().ID, function () { self._zoomX(self._getXAxisMaster()); })
            .on('zoom' + ".x" + self._getXAxisSlave().ID, function () { self._zoomX(self._getXAxisSlave()); })
            .x(self._getXAxisMaster().d3Axis.scale())
            );

THX ...！

Answer 1

我无法使主从独立秤在单个域（x）上工作。在上面的代码中，您已在域（x）上指定了masterScale，因此只会触发主缩放。此外，我无法理解您正在绘制的数据类型，或者主/从标度之间的关系是什么。查看以下代码，看看这些代码是否适用于您：

1）对于数据中的2个独立比例和2个独立维度（属性或属性），您可以将y轴转换为辅助x轴。

DEMO

  var data = [];
  for (var i = 0; i < 500; i++) {
    data.push([Math.random(), Math.random()]);
  }
  d3.select('#chart')
  .append("svg").attr("width", window.innerWidth).attr("height",window.innerHeight)
  .datum(data).call(init());

  function init() {
    var svg, margin = {top: 60,bottom: 80,left: 60,right: 0}, width = 500, height = 400,
      xaxis1 = d3.svg.axis(), xaxis2 = d3.svg.axis(), 
    scaleOne = d3.scale.linear(), scaleTwo = d3.scale.linear(), zoomable = true,
    zoom = d3.behavior.zoom().x(scaleOne).y(scaleTwo).on("zoom", zoomable ? draw : null);

    svg = d3.select('svg').data([data]);
    svg.enter().append('svg');
    var g = svg.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        g.append("defs").append("clipPath")
          .attr("id", "clip")
          .append("rect")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom);

        g.append("svg:rect")
          .attr("class", "border")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom)
          .style("stroke", "black")
          .style("fill", "none");

        g.append("g").attr("class", "axis One")
          .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom) + ")");

        g.append("g").attr("class", "axis Two")
            .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom + 60) + ")");

        g.append("g")
          .attr("class", "scatter")
          .attr("clip-path", "url(#clip)");

        g.append("svg:rect")
          .attr("class", "zoom box")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom)
          .style("visibility", "hidden")
          .attr("pointer-events", "all")
          .call(zoom);

        scaleOne.domain(d3.extent(data, function(d) {
          return d[0];
        })).range([0, width - margin.left - margin.right]);

        xaxis1.scale(scaleOne).orient('bottom').tickPadding(10);
        svg.select('g.axis.One').call(xaxis1);

        scaleTwo.domain(d3.extent(data, function(d) {
          return d[1];
        })).range([0, width - margin.left - margin.right]);

        xaxis2.scale(scaleTwo).orient('bottom').tickPadding(10);
        svg.select('g.axis.Two').call(xaxis2);
        draw();

    function update() {
      var gs = svg.select("g.scatter");

      var circle = gs.selectAll("circle")
        .data(function(d) {
          return d;
        });

      circle.enter().append("svg:circle")
        .attr("class", "points")
        .style("fill", "steelblue")
        .attr("cx", function(d) {
          return X1(d);
        }).attr("cy", function(d) {
          return X2(d);
        }).attr("r", 4);

      circle.attr("cx", function(d) {
        return X1(d);
      }).attr("cy", function(d) {
          return X2(d);
        });

      circle.exit().remove();
    }

    function zoom_update() {
      zoom = d3.behavior.zoom()
        .x(scaleOne)
        .y(scaleTwo)
        .on("zoom", zoomable ? draw : null);
      svg.select('rect.zoom.box').call(zoom);
    }

    function draw() {
      svg.select('g.axis.One').call(xaxis1);
      svg.select('g.axis.Two').call(xaxis2);
      update();
      zoom_update();
    };
    function X1(d) {
      return scaleOne(d[0]);
    }
    function X2(d) {
      return scaleTwo(d[1]);
    }
    return chart;
  }

2）如果您有连接/相关比例，您可以在2轴上应用相同比例并生成偏移校正（甚至是对数校正）并在同一域上具有双轴。这个保持您的y域/轴可用于在数据中绘制另一个维度。

DEMO

  var data = [];
  for (var i = 0; i < 500; i++) {
    data.push([Math.random(), Math.random()]);
  }
  d3.select('#chart')
  .append("svg").attr("width", window.innerWidth).attr("height",window.innerHeight)
  .datum(data).call(init());

  function init() {
    var svg, margin = {top: 60,bottom: 80,left: 60,right: 0}, width = 500, height = 400,
      xaxis1 = d3.svg.axis(), xaxis2 = d3.svg.axis(), 
    scaleOne = d3.scale.linear(), scaleTwo = d3.scale.linear(), zoomable = true,
    zoom = d3.behavior.zoom().x(scaleOne).on("zoom", draw)

    svg = d3.select('svg').data([data]);
    svg.enter().append('svg');
    var g = svg.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        g.append("defs").append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width - margin.left - margin.right)
      .attr("height", height - margin.top - margin.bottom);

    g.append("svg:rect")
      .attr("class", "border")
      .attr("width", width - margin.left - margin.right)
      .attr("height", height - margin.top - margin.bottom)
      .style("stroke", "black")
      .style("fill", "none");

    g.append("g").attr("class", "axis One")
      .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom) + ")");

    g.append("g").attr("class", "axis Two")
      .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom + 60) + ")");

    g.append("g")
      .attr("class", "scatter")
      .attr("clip-path", "url(#clip)");

    g.append("svg:rect")
      .attr("class", "zoom box")
      .attr("width", width - margin.left - margin.right)
      .attr("height", height - margin.top - margin.bottom)
      .style("visibility", "hidden")
      .attr("pointer-events", "all")
      .call(zoom);

    scaleOne.domain(d3.extent(data, function(d) {
      return d[0];
    })).range([0, width - margin.left - margin.right]);

    xaxis1.scale(scaleOne).orient('bottom').tickPadding(10);
    svg.select('g.axis.One').call(xaxis1);

    scaleTwo.domain(d3.extent(data, function(d) {
      return d[1];
    })).range([0, width - margin.left - margin.right]);

    xaxis2.scale(scaleOne)
                .orient('bottom').tickPadding(10)
                .tickFormat(function(d) { return d + 5.5; })
    svg.select('g.axis.Two').call(xaxis2);
    draw();

    function update() {
      var gs = svg.select("g.scatter");
      var circle = gs.selectAll("circle")
        .data(function(d) { return d; });

      circle.enter().append("svg:circle")
        .attr("class", "points")
        .style("fill", "gray")
        .attr("cx", function(d) { return X1(d); })
        .attr("cy", function(d) { return X2(d); })
        .attr("r", 4);

      circle.attr("cx", function(d) { return X1(d); })
              .attr("cy", function(d) { return X2(d); });

      circle.exit().remove();
    }

    function zoom_update() {
      zoom = d3.behavior.zoom()
               .x(scaleOne)
               .on("zoom", draw)
      svg.select('rect.zoom.box').call(zoom);
    }

    function draw() {
        svg.select('g.axis.One').call(xaxis1);
      svg.select('g.axis.Two').call(xaxis2);
      update();
      zoom_update();
    };

    function X1(d) {
      return scaleOne(d[0]);
    }
    function X2(d) {
      return scaleTwo(d[1]);
    }
    return chart;
  }

我从D3示例中获取了基本代码：http://bl.ocks.org/jgbos/9752277