Question

我试图创建一个非常类似于dimpleJS示例中的故事板。我的数据如下所示。

[{"Date":"2014-05-05T19:03:23Z","Liters":0.23,"Soda":"Coke","Day":"2014-05-05","Time of Day":"15:03","Day-Time":"2014-05-05 15:03"},{"Date":"2014-05-05T19:37:27Z","Liters":0.35,"Soda":"Coke","Day":"2014-05-05","Time of Day":"15:37","Day-Time":"2014-05-05 15:37"},{"Date":"2014-05-05T20:33:33Z","Liters":0.21,"Soda":"Coke","Day":"2014-05-05","Time of Day":"16:33","Day-Time":"2014-05-05 16:33"},{"Date":"2014-05-05T21:11:37Z","Liters":0.21,"Soda":"Coke","Day":"2014-05-05","Time of Day":"17:11","Day-Time":"2014-05-05 17:11"},{"Date":"2014-05-06T13:55:09Z","Liters":0.22,"Soda":"Coke","Day":"2014-05-06","Time of Day":"9:55","Day-Time":"2014-05-06 9:55"},{"Date":"2014-05-06T14:27:13Z","Liters":0.27,"Soda":"Coke","Day":"2014-05-06","Time of Day":"10:27","Day-Time":"2014-05-06 10:27"},{"Date":"2014-05-06T15:42:21Z","Liters":0.14,"Soda":"Coke","Day":"2014-05-06","Time of Day":"11:42","Day-Time":"2014-05-06 11:42"},{"Date":"2014-05-06T16:16:24Z","Liters":0.24,"Soda":"Coke","Day":"2014-05-06","Time of Day":"12:16","Day-Time":"2014-05-06 12:16"},{"Date":"2014-05-05T19:13:24Z","Liters":0.59,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"15:13","Day-Time":"2014-05-05 15:13"},{"Date":"2014-05-05T20:33:33Z","Liters":0.01,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"16:33","Day-Time":"2014-05-05 16:33"},{"Date":"2014-05-05T21:04:36Z","Liters":0.39,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:04","Day-Time":"2014-05-05 17:04"},{"Date":"2014-05-05T21:11:37Z","Liters":0.21,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:11","Day-Time":"2014-05-05 17:11"},{"Date":"2014-05-05T21:57:42Z","Liters":0.17,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:57"},{"Date":"2014-05-06T11:11:53Z","Liters":0.42,"Soda":"Diet Coke"},{"Date":"2014-05-06T12:54:03Z","Liters":0.49,"Soda":"Diet Coke"},{"Date":"2014-05-06T12:55:03Z","Liters":0.48,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:07:04Z","Liters":0.27,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:34:07Z","Liters":0.41,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:55:09Z","Liters":0.19,"Soda":"Diet Coke"},{"Date":"2014-05-06T14:27:13Z","Liters":0.01,"Soda":"Diet Coke"},{"Date":"2014-05-06T15:42:21Z","Liters":0.02,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:01:23Z","Liters":0.45,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:05:23Z","Liters":0.52,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:35:27Z","Liters":0.65,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:49:28Z","Liters":0.4,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:50:29Z","Liters":0.14,"Soda":"Diet Coke"},{"Date":"2014-05-05T18:10:18Z","Liters":0.24,"Soda":"Powerade"},{"Date":"2014-05-05T19:03:23Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-05T19:37:27Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-05T20:39:34Z","Liters":0.39,"Soda":"Powerade"},{"Date":"2014-05-05T21:04:36Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T10:32:49Z","Liters":0.18,"Soda":"Powerade"},{"Date":"2014-05-06T11:11:53Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T12:54:03Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T14:27:13Z","Liters":0.02,"Soda":"Powerade"},{"Date":"2014-05-06T15:42:21Z","Liters":0.02,"Soda":"Powerade"},{"Date":"2014-05-06T16:01:23Z","Liters":0.03,"Soda":"Powerade"},{"Date":"2014-05-06T16:05:23Z","Liters":0.03,"Soda":"Powerade"},{"Date":"2014-05-06T16:23:25Z","Liters":0.12,"Soda":"Powerade"},{"Date":"2014-05-06T16:50:29Z","Liters":0.01,"Soda":"Powerade"}]

我有类别和时间轴。问题是气泡不会出现在正确的y（时间）轴上。我的代码如下所示，它也显示了太多的0值，尽管数据集中没有0值。

        var series, charts, lastDate = null, sodas = dimple.getUniqueValues(data, "Soda");

        charts = [new dimple.chart(svg, null)],
        charts.push(myChart);

        charts.forEach(function (chart, i) {
            var x, y, z;
            chart.setBounds(this.attributes.left, this.attributes.top, this.attributes.width - 225, this.attributes.height - 225);
            x = chart.addCategoryAxis("x", "Soda");
            x.overrideMax = 3;
            x.hidden = (i === 0);
            y = chart.addTimeAxis("y", "Day-Time", "%Y-%m-%d %H:%M", "%d-%m %H:%M");
            // y.overrideMax = "17:00";
            y.hidden = (i === 0);
            z = chart.addMeasureAxis("z", "Liters");
            z.overrideMax = 1;
            // Ensure the same colors for every owner in both charts
            // differing by opacity
            sodas.forEach(function (soda, k) {
                chart.assignColor(
                    soda,
                    charts[0].defaultColors[k].fill,
                    "white",
                    (i === 0 ? 0.3 : 1));
            }, this);
        }, this);
        charts[1].addLegend(850, 100, 60, 300, "Right");

        charts[1].setStoryboard("Time of Day", function (d) {
            // Use the last date variable to manage the previous tick's data
            if (lastDate !== null) {
                // Pull the previous data
                var lastData = dimple.filterData(data, "Time of Day", lastDate);
                // Add a series to the background chart to display old position
                var lastSeries = charts[0].addSeries("Soda", dimple.plot.bubble);
                // Average suits these measures better
                lastSeries.aggregate = dimple.aggregateMethod.avg;
                // Give each series its own data at different periods
                lastSeries.data = lastData;
                // Draw the background chart
                charts[0].draw();
                // Class all shapes as .historic
                lastSeries.shapes.attr("class", "historic");
                // Reduce all opacity and remove once opacity drops below 5%
                d3.selectAll(".historic").each(function () {
                    var shape = d3.select(this),
                        opacity = shape.style("opacity") - 0.02;
                    // shape.style("opacity", opacity);
                    if (opacity < 0.1) {
                        shape.remove();
                    } else {
                        shape.style("opacity", opacity);
                    }
                });
            }
            lastDate = d;
        });

        series = charts[1].addSeries("Soda", dimple.plot.bubble)
        series.aggregate = dimple.aggregateMethod.avg;
        // Draw the main chart
        charts[1].draw();

这是截图。

storyboard problem

Answer 1

感谢您添加小提琴。如果您删除x.hidden = (i === 0);和y.hidden = (i === 0);行（以便显示后面的图表轴），则可以看到问题。与测量轴不同，您可以在其中固定最大值和最小值以确保图表具有相同的比例，类别轴将仅绘制数据中的元素，因此具有单个类别的帧将仅在中心绘制单个点。轴。此外，订购将默认更改。

要使您的案例正常工作，您需要修复x轴的排序。

x.addOrderRule(["Coke", "Diet Coke", "Powerade"]);

定义y轴的最大值和最小值：

y.overrideMin = d3.time.format("%Y-%m-%d").parse("2014-05-05");
y.overrideMax = d3.time.format("%Y-%m-%d").parse("2014-05-07");

并为任何缺失的类别添加一些虚拟行。

lastData = lastData.concat([
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Coke"
    },
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Diet Coke"
    },
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Powerade"
    }
]);

这导致此输出：http://jsfiddle.net/4qBqJ/9/

对于dimplejs的故事板示例，使用不同类型的轴的问题

1 个答案: