D3 JS条形图单击条形填充Y轴

时间:2019-06-26 11:31:47

标签: javascript d3.js

我正在使用D3 JS条形图,我需要填充所选条形的Y轴背景

请找到我尝试过的以下代码,该代码会在单击时填充所有Y轴背景


 //We need to fill the background here
    this.g
      .append("g")
      .attr("transform", "translate(18," + this.height + ")")
      .attr("color", "#ebecf5")
      .attr("class", "barChart-Xaxis")
      .call(make_x_gridlines().tickSize(-this.height))
      .style("text-anchor", "end");


 //On click of this bar need to fill the Y-Axis background
    this.g
      .selectAll(".bar")
      .data(this.totalStores)
      .enter()
      .append("rect")
      .attr("rx", 3)
      .attr("class", "bar")
      .style("cursor", "pointer")
      .attr("x", d => this.x(d.store) - 3)
      .attr("y", d => this.y(d.storeCount))
      .attr("width", this.x.bandwidth())
      .attr("height", d => this.height - this.y(d.storeCount))
      .on("click", function(d: any) {
        selfFunctionCall.singleBarClick();
        d3.select(".barChart-Xaxis").style("fill", "#000");
      })

0 个答案:

没有答案