文章/答案/技术大牛

发布

社区首页 >问答首页 >为dc.js气泡图创建日期-时间轴的正确方法是什么？

问为dc.js气泡图创建日期-时间轴的正确方法是什么？
EN

Stack Overflow用户

提问于 2016-03-02 22:01:36

回答 1查看 1.3K关注 0票数 1

在dc.js泡沫图上挣扎。

我的目标是使X轴成为一个日期/时间线。我有以下代码，它可以很好地处理线性X，但在日期/时间方面没有显示任何内容：

goldberg/LL41xxho/13/

<body>
    <div class="container">
        <div class="row">
            <div id="bubble-chart" class="dc-chart">
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</body>

var data = [
        {date: "12/27/2012", label: "a1", x: 2, y: 190, bubble: 5},
        {date: "12/28/2012", label: "a2", x: 2, y: 10,  bubble: 5},
        {date: "12/29/2012", label: "a3", x: 95, y: 300, bubble: 10},
        {date: "01/04/2013", label: "a9", x: 51, y: 90,  bubble: 1},
        ];

var ndx = crossfilter(data);

var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = parseDate(d.date);
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var xDim = ndx.dimension(function(d) {return d.x;});

var dateGroup = dateDim.group().reduce(
    function(p, v) {
        ++p.count;
        p.label = v.label;
        p.bubble = v.bubble;
        p.x = v.x;
        p.y = v.y;

        return p;
    },
    function(p, v) {
        --p.count;
        p.bubble = 0;
        p.label = "";
        p.x = 0;
        p.y = 0;

        return p;
    }, function() {
        return { count: 0, x: 0, y:0, label: "" };
    });

var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
var xRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.x + d.value.bubble*2; }) ],
    yRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.y + d.value.bubble*2; }) ];


var bubbleChart  = dc.bubbleChart("#bubble-chart"); 
//debugger;
bubbleChart
    .dimension(dateDim)
    .group(dateGroup)
 //             .x(d3.time.scale()
 //                   .domain([minDate, maxDate])
  //                  .nice(d3.time.day)
                    //.range(xRange))
  //                  )
    .x(d3.scale.linear().domain(xRange))
    .y(d3.scale.linear().domain(yRange))

    .width(400)
    .height(400)
    .yAxisPadding(50)
    .xAxisPadding(50)
    .xAxisLabel('X')
    .yAxisLabel('Y')
    .label(function (p) {
        return p.value.label;
    })
    .renderLabel(true)
    .title(function (p) {

        return [
               "x: " + p.value.x,
               "y: " + p.value.y,
               "Bubble: " + p.value.bubble,
               ]
               .join("\n");
    })
    .renderTitle(true)
    .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
    .renderVerticalGridLines(true)
    .maxBubbleRelativeSize(0.3)
    .keyAccessor(function (p) {

        return p.value.x;
    })
    .valueAccessor(function (p) {
        return p.value.y;
    })
    .radiusValueAccessor(function (p) {
        return p.value.bubble;
    });
dc.renderAll();

我在这里也看过同样的讨论，但没有找到答案。

在我的小提琴，我有第51至55行注释掉，这是我的尝试在时间轴。下面的行以.x作为d3.linear，运行良好。

我如何正确地做到这一点，使我的时间范围成为我的.x

crossfilter

d3.js

dc.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-05 08:31:06

当dc.js图表中什么都没有出现时，这肯定是令人沮丧的，但在这里，我认为您只需要使用一个日期，当您指的是日期。

我注释掉了keyAccessor，这样图表就会使用默认的key ( Date类型)，然后图表就可以绘制好了。

http://jsfiddle.net/gordonwoodhull/fwebkwqo/4/

(x当然不是Date类型的。)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35759019

复制

相似问题

问为dc.js气泡图创建日期-时间轴的正确方法是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为dc.js气泡图创建日期-时间轴的正确方法是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为dc.js气泡图创建日期-时间轴的正确方法是什么？
EN