Question

我想用方框突出显示带有四月（x轴值）的条形图。但我没有办法做同样的事情。

尝试获得受尊重的栏的坐标，但无法找到相同的解决方案

无法找到我需要突出显示的相应栏的坐标。

在堆积条形图d3.js v4中用方框突出显示条形的方法应该是什么

＆＃13;

createStackedBarChart(130,300,10,60,20,45,"manager-line-graph-2");

function createStackedBarChart(height,width,top,right,bottom,left,id){

    var margin = {top: top, right: right, bottom: bottom, left: left };
    //console.log("margin"+margin);
    var svg = d3.select("#"+id).append("svg"),      
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom,
    g = svg.attr("width", "100%")
    .attr("height", height + margin.top + margin.bottom)
    .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.2)
    .align(5.0);
  

  var y = d3.scaleLinear()
    .rangeRound([height, 0]);

  var z = d3.scaleOrdinal()
    .range(["#0000FF", "#00FFFF", "#81F781", "#F3F781", "#FE2E2E"]);

 var data = [
  {"Months": "Feb","Installation": 5,"Product": 10,"Payment": 15,"Billing": 20,"Outage": 25},
  {"Months": "March","Installation": 6,"Product": 8,"Payment": 9,"Billing": 15,"Outage": 18},
  {"Months": "April","Installation": 9,"Product": 12,"Payment": 24,"Billing": 17,"Outage": 14},
  {"Months": "May","Installation": 9,"Product": 12,"Payment": 14,"Billing": 17,"Outage": 14},
  {"Months": "June","Installation": 9,"Product": 12,"Payment": 15,"Billing": 11,"Outage": 10}
];
  // fix pre-processing
  var keys = [];
  for (key in data[0]){
    if (key != "Months")
      keys.push(key);
  }

  console.log("value of keys are " + keys);

  data.forEach(function(d){
    d.total = 0;
    keys.forEach(function(k){
      d.total += d[k];
    })
  });

  //data.sort(function(a, b) {
    //return b.total - a.total;
  //});
  x.domain(data.map(function(d) {
    return d.Months;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.total;
  })]).nice();
  z.domain(keys);

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
    .attr("fill", function(d) {return z(d.key);})
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("x", function(d) {
      return x(d.data.Months);
    })
    .attr("y", function(d) {
      return y(d[1]);
    })
    .attr("height", function(d) {
      return y(d[0]) - y(d[1]);
    })
    .attr("width", x.bandwidth()-5);

  g.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(5));

  g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(5, "s"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks(5).pop()))
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start") 

  var legend = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });
  
  
    //legend.append("rect")
    //.attr("x", width + 20)
    //.attr("width", 10)
    //.attr("height", 10)
    //.attr("fill", z);

    legend.append("circle")
    .attr("r",5)
    .attr("cx", width+30)      
    .attr("cy", 0)
    .attr("fill",z);

  legend.append("text")
    .attr("x", width + 88)
    .attr("y", 3.5)
    .attr("dy", "0.12em")
    .text(function(d) {
      return`enter code here` d;
    });
}

＆＃13;

Answer 1

我之前使用的一个解决方案是为相同的数据创建一个不可见的条形图层。然后使用.on("mouseover", function...);通过更改样式或填充不透明度再次显示该数据的条形。

这是一个样本bl.ock我的意思。它是一个带有序数比例的分组条形图，但同样可以通过一些调整应用于您的数据。 https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

2018年5月5日更新：进一步阅读后，我发现您的问题与我建议的解决方案不同。此链接可能为您提供了如何use an if statement to selectively highlight particular data的良好起点。

因此您可以将以下样式用于rect

.style ("fill", function(d) {
   if (d.Months === "April") {return "red"}  // <== Add these
   else    { return "black" } 
  })

如何突出显示堆积条形图中的条形d3.js v4

1 个答案: