dc.js 叠加 2 个图表

Question

抱歉，如果已经有另一个问题可以帮助我，但我没有找到。

我有一个包含人员的数据库，其中的列是身份证、姓名、性别、身高和体重。

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52
11,Baudoin,Male,168,55
12,Ava,Female,180,52
13,Candida,Female,153,56
14,Curtis,Male,161,63
15,Mozelle,Female,167,59
16,Hermina,Female,180,90
17,Pammy,Female,159,55
18,Zechariah,Male,178,95
19,Kerwin,Male,150,69
20,John,Male,179,70
21,Shayne,Male,176,57
22,Hewie,Male,171,55
23,Murray,Male,179,54
24,Jarret,Male,158,76
25,Archer,Male,174,53
26,Emmy,Female,168,85

这是我获取数据的方式。

 d3.csv("/local-test-data/people_hw.csv",
      data => <IDataFromCsv>{
        id: +data["id"],
        gender: data["gender"],
        name: data["name"],
        height: +data["height"],
        weight: +data["weight"],
      }
    )
      .then((data: IDataFromCsv[]) => {
        this.sourceDataWDays = data;
        this.sourceDataWDays.forEach(d => {
          if (d.gender === "Male") {
            d.newData = 1;
          } else {
            d.newData = 2;
          }
        });
        return this.sourceDataWDays;
      })
      .then((data) => this.loadCharts(data))

  };

sourceDataWDays: IDataFromCsv[];

export interface IDataFromCsv {
  id: number,
  name: string,
  gender: string,
  height: number,
  weight: number,
  newData: number,
}

我正在使用 dc.js、d3.js 和交叉过滤器创建此仪表板，并使用 angular 和打字稿创建网络应用程序。

我使用创建了 2 个图表，一个条形图显示了我在数据库中有多少人，另一个是系列图（有 2 条线）显示了人员的体重。（x 轴表示男性或女性的体重和 y 轴）到现在为止一切都很好。

我想要什么？

我想重叠图表。如果第一个没有过滤器，我希望隐藏第二个。如果第一个有 1 个过滤器，我希望条形图获得条形图的不透明度（不透明度：01），隐藏轴，而不是它的轴，我希望第二个的轴和线在条形图上 pe。

像这样但是有轴：

到目前为止，这是我的代码：

  loadCharts(data: IDataFromCsv[]): void {

    let ndx: Crossfilter<IDataFromCsv> = crossfilter(data);

    this.loadWeightChart(ndx);
    this.loadGenderChart(ndx);

    dc.renderAll();
  };

  loadGenderChart(ndx: Crossfilter<IDataFromCsv>): void {

    this.genderChart = dc.barChart("#genderChart");

    let gDimension: any = ndx.dimension(d => d.gender);
    let gGroup: any = gDimension.group().reduceCount();

    this.genderChart
      .width(768)
      .height(480)
      .dimension(gDimension)
      .group(gGroup)
      .x(d3.scaleOrdinal())
      .colorAccessor((d, i) => i)
      .xUnits(dc.units.ordinal)
      .on("filtered.monitor", genderChart => {
        if (genderChart.filters().length === 1) {
          d3.select("#genderChart").selectAll("svg").style("opacity", "0.2");
          d3.select("#genderChart").selectAll("g .axis").style("visibility", "hidden");
          dc.redrawAll();
        } else {
          d3.select("#genderChart").selectAll("svg").style("opacity", "1");
          d3.select("#genderChart").selectAll("g .axis").style("visibility", "visible");
        }
      })
      .brushOn(false)
      .yAxisLabel("Count")
      .xAxisLabel("Gender")
  };

  loadWeightChart(ndx: Crossfilter<IDataFromCsv>): void {

    this.weightChart = dc.seriesChart("#weightChart");

    let wdDimension: any = ndx.dimension(data => { return [data.gender, data.weight] });
    let wdGroup: any = wdDimension.group().reduceCount();

    this.weightChart
      .width(800)
      .height(500)
      .chart(c => {
        return dc.lineChart(c)
      })
      .dimension(wdDimension)
      .group(wdGroup)
      .xAxisLabel("Weight")
      .yAxisLabel("Count")
      .elasticY(true)
      .brushOn(false)
      .x(d3.scaleLinear().domain([50, 100]))
      .seriesAccessor(d => d.key[0])
      .keyAccessor(d => +d.key[1])
      .valueAccessor(d => +d.value)
  };

和HTML

<div class="col-md-12">
  <div class="row">
    <div class="col-md-12" id="genderChart">
      <div class="forReset" style="margin:10px 0 -10px 0;">
        <a class="reset" (click)="resetGenderChart();" style="display: none;"><i class="fa fa-refresh"></i></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" id="weightChart">

    </div>
  </div>
</div>

我可以从我所做的开始做吗？怎么样？

我不在乎我使用的是哪种图表，只要我得到我需要的东西（带有线条重叠的条形图）即可。我是 dc.js & d3.js 和交叉过滤器的初学者。非常感谢！

Answer 1

在同一图表中绘制线条和柱状图是使用 composite chart 实现的。

如果条形与线条的比例不同，您可以使用 right axis 功能绘制它们以填充图表的高度。

如果需要，您可以使用 CSS

隐藏右轴

.dc-chart g.axis.yr {
    visibility: hidden;
}

dc.js 叠加 2 个图表

dc.js overlaying 2 charts

d3.js

dc.js