相关疑难解决方法(0)

我正在使用D3制作和弦图.

我试图这样做,以便当用户点击链接时,数据集将更改为另一个预定义的数据集.我已经查看了http://exposedata.com/tutorial/chord/latest.html和http://fleetinbeing.net/d3e/chord.html,并尝试使用其中的一些元素来使其工作.

以下是用于创建"默认"图表的JavaScript:

var dataset = "data/all_trips.json";

var width = 650,
    height = 600,
    outerRadius = Math.min(width, height) / 2 - 25,
    innerRadius = outerRadius - 18;

var formatPercent = d3.format("%");

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
    .padding(.03)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

var svg = d3.select("#chart_placeholder").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 1.5 + "," + height / 1.75 + ")");

svg.append("circle")
    .attr("r", …

我有以下csv数据,

date,scanned,unscanned,compid,sbu
01/2014,10,90,101,f&r
02/2014,55,40,101,f&r
03/2014,45,23,101,f&r
04/2014,65,35,101,f&r
05/2014,100,20,101,f&r
06/2014,50,30,101,f&r
07/2014,10,90,101,f&r
08/2014,22,48,101,f&r
09/2014,0,100,101,f&r
10/2014,3,97,101,f&r
11/2014,22,60,101,f&r
12/2014,57,37,101,f&r
01/2014,30,100,101,ip
02/2014,130,10,101,ip

有没有办法我们可以结合jan-2014的数据用于f&r和ip sbu值,并在堆积条中显示值.例如,如果我选中一个复选框进行分组,我需要将扫描显示为30 + 10 = 40并且在x轴中以2014年1月的堆栈中未扫描为100 + 90 = 190.

我构建堆栈栏的代码如下:

var w = 960,
    h = 500,
    p = [20, 50, 30, 20],

    x = d3.time.scale().range([1, 80]);
    y = d3.scale.linear().range([0, h - p[0] - p[2]]),
    z = d3.scale.ordinal().range(["#819FF7", "#CB491A"]),
    parse = d3.time.format("%m/%Y").parse,
    format = d3.time.format("%b-%y");

    var xAxis=d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .ticks(d3.time.month, 1)
              //.ticks(12)



   xAxis.tickFormat(d3.time.format("%b-%y"));


    /*var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(12)
    .orient("left");*/

var svg = …

我无法理解 dc 组如何绘制图表。这样一个过滤器的变化就会反映在所有其他过滤器上。我有一个带有两个系列图表的简单代码。当我在其中一个画笔上绘制画笔时，它不会过滤另一个画笔。不知道为什么？有人可以快速浏览一下小代码并提出建议吗？

d3.csv("data/compareData.txt", function(data) {

  ndx = crossfilter(data);
  runDimension = ndx.dimension(function(d) {return [+d3.time.format.iso.parse(d.timestamp), +d.meterid]; });
  frequencyGroup = runDimension.group().reduceSum(function(d) { return +d.frequency; });
  magnitudeGroup = runDimension.group().reduceSum(function(d) { return +d.magnitude; });


 frequencyChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(true)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .elasticY(true)
    .dimension(runDimension)
    .group(frequencyGroup)
    .mouseZoomable(false)
    .seriesAccessor(function(d) {return +d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  frequencyChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
  frequencyChart.margins().left += 40;

 magnitudeChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(true) …