D3.js dc.js叠加2个图表

很抱歉，如果已经有其他问题可以帮助我，但我没有找到它

我有一个个人数据库，其中的列是id、姓名、性别、身高和体重

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,
}

d3.csv（“/localtestdata/people_hw.csv”，
数据=>{
id:+数据[“id”]，
性别：数据[“性别”]，
名称：数据[“名称”]，
高度：+数据[“高度”]，
重量：+数据[“重量”]，
}
)
。然后（（数据：IDataFromCsv[]）=>{
this.sourceDataWDays=数据；
this.sourceDataWDays.forEach（d=>{
如果（d.性别==“男性”）{
d、 newData=1；
}否则{
d、 newData=2；
}
});
返回this.sourceDataWDays；
})
.然后（（数据）=>此.loadCharts（数据））
};
sourceDataWDays:IDataFromCsv[]；
导出接口IDataFromCsv{
身份证号码：，
名称：string，
性别:string,，
高度：数字，
重量：数字，
新数据：数字，
}

我使用dc.js、d3.js和crossfilter创建这个仪表板，使用angular&typescript创建web应用程序

我使用创建了两个图表，一个条形图显示了我在数据库中的性别人数，另一个是一系列图表（有两行），显示了人员的体重。（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)
  };

loadCharts（数据：IDataFromCsv[]）：无效{
设ndx:Crossfilter=Crossfilter（数据）；
这是一张装载重量图（ndx）；
本图为loadGenderChart（ndx）；
dc.renderAll（）；
};
loadGenderChart（ndx:交叉过滤器）：无效{
this.genderChart=dc.barChart（“genderChart”）；
设gDimension:any=ndx.dimension（d=>d.gender）；
让gGroup:any=gDimension.group（）.reduceCount（）；
这是genderChart
.宽度（768）
.身高（480）
.尺寸（gDimension）
.group（gGroup）
.x（d3.scaleOrdinal（））
.colorAccessor（（d，i）=>i）
.xUnits（dc.units.序数）
.on（“过滤的.监视器”，genderChart=>{
if（genderChart.filters（）.length==1）{
d3.选择（“性别特征”）。选择全部（“svg”）。样式（“不透明度”、“0.2”）；
d3.选择（“性别特征”）。选择全部（“g轴”）。样式（“可见性”、“隐藏”）；
dc.redrawAll（）；
}否则{
d3.选择（“性别特征”）。选择全部（“svg”）。样式（“不透明度”、“1”）；
d3.选择（“性别特征”）。选择全部（“g轴”）。样式（“可见性”、“可见”）；
}
})
.brushOn（错）
.yAxisLabel（“计数”）
.xAxisLabel（“性别”）
};
loadWeightChart（ndx:Crossfilter）：无效{
this.weightChart=dc.seriesChart（“#weightChart”）；
让wdDimension:any=ndx.dimension（数据=>{return[data.gender，data.weight]}）；
让wdGroup:any=wdDimension.group（）.reduceCount（）；
这是重量表
.宽度（800）
.高度（500）
.图表（c=>{
返回直流线路图（c）
})
.维度（wdDimension）
.group（wdGroup）
.xAxisLabel（“重量”）
.yAxisLabel（“计数”）
.弹性（真实）
.brushOn（错）
.x（d3.scaleLinear（）.domain（[50100]））
.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以及交叉过滤器的初学者。多谢各位

在同一图表中绘制线条和条形图是通过以下方法实现的

如果条形图与直线的比例不同，则可以使用该功能绘制两个条形图，以填充图表的高度

如果需要，可以使用CSS隐藏右轴

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

---

在同一图表中绘制线条和条形图是使用实现的

如果条形图与直线的比例不同，则可以使用该功能绘制两个条形图，以填充图表的高度

如果需要，可以使用CSS隐藏右轴

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

---

我很难想象你想做什么。一个问题是，你一直提到“条形图”，但这些是折线图，所以我猜你指的是“线条”？另外，你说你想“重叠”图表，但你也说你想在显示另一个图表时隐藏其中一个，所以我猜你的意思是你想“替换”一个图表，并在同一位置显示另一个？最后，我不知道“不透明01”是什么意思；这通常是百分比或0到1之间的数字。请编辑您的问题并加以澄清。嗨@Gordon，我会尽量简化。我有两张图表。一个和第二个。我想重叠图表：当我单击条形图中的一个条形图，使其看起来像或。在过去的2个IMG中，我没有轴，因为我将条形图轴设置为隐藏，因为我希望用线字符轴代替它们。关于我帖子中的IMG，你是对的…我在那里放了一个折线图而不是条形图。我在想象你想做什么时遇到了一些困难。一个问题是，你一直提到“条形图”，但这些是折线图，所以我猜你指的是“线条”？另外，你说你想“重叠”图表，但你也说你想在显示另一个图表时隐藏其中一个，所以我猜你的意思是你想“替换”一个图表，并在同一位置显示另一个？最后，我不知道“不透明01”是什么意思；这通常是一个百分比或一个数字