如何使用crossfilter.js将数据添加到可重用的散点图?

时间:2018-04-10 14:32:21

标签: javascript d3.js crossfilter

我使用task fullCoverageReport(type: JacocoReport) { dependsOn 'createDebugCoverageReport' dependsOn 'testDebugUnitTest' reports { xml.enabled = true html.enabled = true } def fileFilter = ['**/R.class', '**/R$*.class', '**/BuildConfig.*', '**/Manifest*.*', '**/*Test*.*', 'android/**/*.*', '**/*_MembersInjector.class', '**/Dagger*Component.class', '**/Dagger*Component$Builder.class', '**/*_*Factory.class', '**/*ComponentImpl.class', '**/*SubComponentBuilder.class'] def debugTree = fileTree(dir: "${buildDir}/intermediates/classes/debug", excludes: fileFilter) def mainSrc = "${project.projectDir}/src/main/java" sourceDirectories = files([mainSrc]) classDirectories = files([debugTree]) executionData = fileTree(dir: "$buildDir", includes: [ "jacoco/testDebugUnitTest.exec", "outputs/code-coverage/connected/*coverage.ec" ]) } 实现了可重用的图表(散点图)。我从io.realm.*RealmProxy.class文件d3.js获取x和y坐标。

我如何初始化图表:

csv

现在我想使用output.csv库来提供链接和刷新,但是我在实现时遇到了麻烦。我尝试了什么:

var chart = scatterPlot()
        .width(400)
        .height(400)
        .x(function (d) { return d.x; }) // x is the first coordinate, located in the csv file
        .y(function (d) { return d.y; }); // y is second coordinate



d3.csv("output.csv", function (data) {
        d3.select(".scatterplot")
            .datum(data)
            .call(chart)
    });

如何将crossfilter纳入此问题?

小提琴 - JSFiddle

1 个答案:

答案 0 :(得分:1)

对我有用的是什么:

var chart = scatterPlot()
        .width(400)
        .height(400)
        .x(function (d) { return d.key[0]; }) // x is the first coordinate, located in the csv file
        .y(function (d) { return d.key[0]; }); // y is second coordinate

var csData = crossfilter(data);
csData.dimXY = csData.dimension(function(d){
        return [parseFloat(d.x1),parseFloat(d.y1)];
    });

csData.byXY = csData.dimXY.group();

d3.select("#scatterplot1")
            .datum(csData.byScatter.all())
            .call(chart);