如何使用交叉过滤器重新缩放 x 轴？

Question

首先，对不起我的英语。

我在学习dc.js。

我有 3 个图表（1 个组合图、1 个折线图和 1 个条形图）。

当我控制条形图的画笔时，我想重新缩放其他2个图表的X轴。

使用事件触发器？

var temperatureChart;
var windSpeedChart;
var dateChart;

var init = function() {
temperatureChart = dc.compositeChart("#temperature-chart");
windSpeedChart = dc.lineChart("#windspeed-chart");
dateChart = dc.barChart("#date-chart");

d3.json(jsonUrl, function(error, result) {
    var dateFormat = d3.time.format("%Y-%m-%d %H:%M");
    var numberFormat = d3.format(".2f");
    var data = result.result.data[0];

    data.forEach(function(e) {
        e.observeDate = dateFormat.parse(e.observeDate);
    });

    var ndx = crossfilter(data),
    all = ndx.groupAll();
    dimension1 = ndx.dimension(function(d) {return d.observeDate;}),
    dimension2 = ndx.dimension(function(d) {return d.observeDate;}),
    dimension3 = ndx.dimension(function(d) {return d.observeDate;}),
    temperatureGroup = dimension1.group().reduceSum(function(d) {return d.temperature;}),
    windSpeedGroup = dimension2.group().reduceSum(function(d) {return d.windSpeed;}),
    dateGroup = dimension3.group();

    var scaleMin = d3.min(data, function(d){
        return d.observeDate;
    });
    var scaleMax = d3.max(data, function(d){
        return d.observeDate;
    });

    var width = 1000, height = 300;
    var margin = {top: 30, right: 50, bottom: 25, left: 40};

    temperatureChart
    .width(width)
    .height(height)
    .transitionDuration(1000)
    .margins(margin)
    .dimension(dimension1)
    .xUnits(d3.time.hours)
    .elasticY(true)
    .elasticX(true)
    .mouseZoomable(true)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([scaleMin, scaleMax]))
    .brushOn(false)
    .renderlet(function(c) {
        var canvas = (c.g()).append("g").attr("transform", "translate("+margin.left+","+margin.top+")").attr("pointer-events", "all");
        var crossHair = canvas.append("g").attr("class", "crosshair");

        crossHair.append("line").attr("id", "h_crosshair")
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("line").attr("id", "v_crosshair")
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("text").attr("id", "crosshair_text")
            .style("font-size", "10px")
            .style("stroke", "gray")
            .style("stroke-width", "0.5px");

        canvas.on("mousemove", function() {
            addCrossHair(d3.mouse(this)[0], d3.mouse(this)[1]);
        }).on("mouseover", function() {
            d3.selectAll("#v_crosshair").style("display", "block");
            c.selectAll("#h_crosshair").style("display", "block");
        }).on("mouseout", function() {
            d3.selectAll("#v_crosshair").style("display", "none");
            c.selectAll("#h_crosshair").style("display", "none");
        }).append("rect")
          .style("visibility", "hidden")
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom);

        function addCrossHair(x, y) {
            c.selectAll("#h_crosshair")
                .attr("x1", 0)
                .attr("y1", y)
                .attr("x2", c.xAxisLength())
                .attr("y2", y)
                .style("display", "block");

            d3.selectAll("#v_crosshair")
                .attr("x1", x)
                .attr("y1", 0)
                .attr("x2", x)
                .attr("y2", c.yAxisHeight())
                .style("display", "block");

        }
    })
    .compose([
        dc.lineChart(temperatureChart)
                .dotRadius(5)
                .group(temperatureGroup)
    ]);

    windSpeedChart
    .width(width)
    .height(height)
    .transitionDuration(1000)
    .margins(margin)
    .dimension(dimension2)
    .xUnits(d3.time.hours)
    .elasticY(true)
    .elasticX(true)
    .mouseZoomable(true)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([scaleMin, scaleMax]))
    .brushOn(false)
    .group(windSpeedGroup)
    .renderlet(function(c) {
        var canvas = (c.g()).append("g").attr("transform", "translate("+margin.left+","+margin.top+")").attr("pointer-events", "all");
        var crossHair = canvas.append("g").attr("class", "crosshair");

        crossHair.append("line").attr("id", "h_crosshair")
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("line").attr("id", "v_crosshair")
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("text").attr("id", "crosshair_text")
            .style("font-size", "10px")
            .style("stroke", "gray")
            .style("stroke-width", "0.5px");

        var bisectDate = d3.bisector(function(d) {
            return d.observeDate;
        }).right;

        canvas.on("mousemove", function() {
            addCrossHair(d3.mouse(this)[0], d3.mouse(this)[1]);
        }).on("mouseover", function() {
            d3.selectAll("#v_crosshair").style("display", "block");
            c.selectAll("#h_crosshair").style("display", "block");
        }).on("mouseout", function() {
            d3.selectAll("#v_crosshair").style("display", "none");
            c.selectAll("#h_crosshair").style("display", "none");
        }).append("rect")
          .style("visibility", "hidden")
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom);

        c.xAxis().scale();

        function addCrossHair(x, y) {
            c.select("#h_crosshair")
                .attr("x1", 0)
                .attr("y1", y)
                .attr("x2", c.xAxisLength())
                .attr("y2", y)
                .style("display", "block");

            d3.selectAll("#v_crosshair")
                .attr("x1", x)
                .attr("y1", 0)
                .attr("x2", x)
                .attr("y2", c.yAxisHeight())
                .style("display", "block");

        }
    });

    dateChart
     .width(width)
     .height(50)
     .margins({top: 0, right: 50, bottom: 20, left: 40})
     .xUnits(d3.time.hours)
     .x(d3.time.scale().domain([scaleMin, scaleMax]))
     .centerBar(true)
     .brushOn(true)
     .dimension(dimension3)
     .group(dateGroup).yAxis().ticks(0);

    dateChart.on("filtered", function(c) {
        if(c.filter())
            dc.events.trigger(function() {
                        // Any code here?
            });
    });
    dc.renderAll(); 
});

Answer 1

您是说上一个 "monthly abs volume & move" 图表 on the main dc.js page 中可以看到的 "range / focus chart" 功能吗？

如果是这样，这里是文档： https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.coordinateGridMixin+rangeChart

这是一个非常简单的功能，没有完整的文档，所以如果您有任何问题请询问。

编辑：注意到您正在谈论一个 "range chart" 的多个 "focus charts"。这不是内置的，但它包含在这个 Q/A 中：

Answer 2

作为参考，我对这个问题的理解是您希望根据值的变化范围自动重新缩放 Y 轴，我发现以下方法对我有用：

chart.elasticY(true);

如何使用交叉过滤器重新缩放 x 轴？

How to rescale x axis using the crossfilter?

javascript

d3.js

crossfilter

dc.js