如何在x軸下方制作帶有其他垂直線的條形圖

Question

我想使D3條形圖在x軸上具有其他垂直線。 。

我在以下示例中檢查了其中一個網站。 我想要使​​其像該圖一樣，但是我想要一個額外的底線。 你能告訴我改變什么嗎？

 var margin = { top: 20, right: 20, bottom: 60, left: 40 }, width = 560 - margin.left - margin.right, height = 360 - margin.top - margin.bottom; var color = { Mechanical: '#4A7B9D', Electrical: '#54577C', Hydraulic: '#ED6A5A' }; var barPadding = 40; var data = [{ key: 'Mechanical', values: [{ key: 'Gear', value: 11 }, { key: 'Bearing', value: 8 }, { key: 'Motor', value: 3 }] }, { key: 'Electrical', values: [{ key: 'Switch', value: 19 }, { key: 'Plug', value: 12 }, { key: 'Cord', value: 11 }, { key: 'Fuse', value: 3 }, { key: 'Bulb', value: 2 }] }, { key: 'Hydraulic', values: [{ key: 'Pump', value: 4 }, { key: 'Leak', value: 3 }, { key: 'Seals', value: 1 }] }]; var rangeBands = []; var cummulative = 0; data.forEach(function(val, i) { val.cummulative = cummulative; cummulative += val.values.length; val.values.forEach(function(values) { values.parentKey = val.key; rangeBands.push(i); }) }); //console.log(data); var x_category = d3.scale.linear() .range([0, width]); var x_defect = d3.scale.ordinal().domain(rangeBands).rangeRoundBands([0, width], .1); var x_category_domain = x_defect.rangeBand() * rangeBands.length; x_category.domain([0, x_category_domain]); var y = d3.scale.linear() .range([height, 0]); y.domain([0, d3.max(data, function(cat) { return d3.max(cat.values, function(def) { return def.value; }); })]); var category_axis = d3.svg.axis() .scale(x_category) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style('background-color', 'EFEFEF') .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Value"); var category_g = svg.selectAll(".category") .data(data) .enter().append("g") .attr("class", function(d) { return 'category category-' + d.key; }) .attr("transform", function(d) { return "translate(" + x_category((d.cummulative * x_defect.rangeBand())) + ",0)"; }) .attr("fill", function(d) { return color[d.key]; }); var category_label = category_g.selectAll(".category-label") .data(function(d) { return [d]; }) .enter().append("text") .attr("class", function(d) { //console.log(d) return 'category-label category-label-' + d.key; }) .attr("transform", function(d) { var x_label = x_category((d.values.length * x_defect.rangeBand() + barPadding) / 2); var y_label = height + 30; return "translate(" + x_label + "," + y_label + ")"; }) .text(function(d) { return d.key; }) .attr('text-anchor', 'middle'); var defect_g = category_g.selectAll(".defect") .data(function(d) { return d.values; }) .enter().append("g") .attr("class", function(d) { return 'defect defect-' + d.key; }) .attr("transform", function(d, i) { return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)"; }); var defect_label = defect_g.selectAll(".defect-label") .data(function(d) { return [d]; }) .enter().append("text") .attr("class", function(d) { //console.log(d) return 'defect-label defect-label-' + d.key; }) .attr("transform", function(d) { var x_label = x_category((x_defect.rangeBand() + barPadding) / 2); var y_label = height + 10; return "translate(" + x_label + "," + y_label + ")"; }) .text(function(d) { return d.key; }) .attr('text-anchor', 'middle'); var rects = defect_g.selectAll('.rect') .data(function(d) { return [d]; }) .enter().append("rect") .attr("class", "rect") .attr("width", x_category(x_defect.rangeBand() - barPadding)) .attr("x", function(d) { return x_category(barPadding); }) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }); 

 /* Styles go here */ body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } 

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Hello Plunker!</h1> </body> </html> 

Answer 1

嘗試這種方式：-

category_g
  .append("line")
  .style("stroke", "black")
  .style("stroke-width", "2px")
  .style("stroke-linecap","round")
  .attr("x1", function(d) {
    var bbox = this.parentNode.getBBox();
    return bbox.width+5;
  })
  .attr("y1", height)
  .attr("x2", function(d) {
    var bbox = this.parentNode.getBBox();
    return bbox.width;
  })
  .attr("y2", height + 50);

 var margin = { top: 20, right: 20, bottom: 60, left: 40 }, width = 560 - margin.left - margin.right, height = 360 - margin.top - margin.bottom; var color = { Mechanical: '#4A7B9D', Electrical: '#54577C', Hydraulic: '#ED6A5A' }; var barPadding = 40; var data = [{ key: 'Mechanical', values: [{ key: 'Gear', value: 11 }, { key: 'Bearing', value: 8 }, { key: 'Motor', value: 3 }] }, { key: 'Electrical', values: [{ key: 'Switch', value: 19 }, { key: 'Plug', value: 12 }, { key: 'Cord', value: 11 }, { key: 'Fuse', value: 3 }, { key: 'Bulb', value: 2 }] }, { key: 'Hydraulic', values: [{ key: 'Pump', value: 4 }, { key: 'Leak', value: 3 }, { key: 'Seals', value: 1 }] }]; var rangeBands = []; var cummulative = 0; data.forEach(function(val, i) { val.cummulative = cummulative; cummulative += val.values.length; val.values.forEach(function(values) { values.parentKey = val.key; rangeBands.push(i); }) }); //console.log(data); var x_category = d3.scale.linear() .range([0, width]); var x_defect = d3.scale.ordinal().domain(rangeBands).rangeRoundBands([0, width], .1); var x_category_domain = x_defect.rangeBand() * rangeBands.length; x_category.domain([0, x_category_domain]); var y = d3.scale.linear() .range([height, 0]); y.domain([0, d3.max(data, function(cat) { return d3.max(cat.values, function(def) { return def.value; }); })]); var category_axis = d3.svg.axis() .scale(x_category) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style('background-color', 'EFEFEF') .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Value"); var category_g = svg.selectAll(".category") .data(data) .enter().append("g") .attr("class", function(d) { return 'category category-' + d.key; }) .attr("transform", function(d) { return "translate(" + x_category((d.cummulative * x_defect.rangeBand())) + ",0)"; }) .attr("fill", function(d) { return color[d.key]; }); var category_label = category_g.selectAll(".category-label") .data(function(d) { return [d]; }) .enter().append("text") .attr("class", function(d) { //console.log(d) return 'category-label category-label-' + d.key; }) .attr("transform", function(d) { var x_label = x_category((d.values.length * x_defect.rangeBand() + barPadding) / 2); var y_label = height + 30; return "translate(" + x_label + "," + y_label + ")"; }) .text(function(d) { return d.key; }) .attr('text-anchor', 'middle'); var defect_g = category_g.selectAll(".defect") .data(function(d) { return d.values; }) .enter().append("g") .attr("class", function(d) { return 'defect defect-' + d.key; }) .attr("transform", function(d, i) { return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)"; }); var defect_label = defect_g.selectAll(".defect-label") .data(function(d) { return [d]; }) .enter().append("text") .attr("class", function(d) { //console.log(d) return 'defect-label defect-label-' + d.key; }) .attr("transform", function(d) { var x_label = x_category((x_defect.rangeBand() + barPadding) / 2); var y_label = height + 10; return "translate(" + x_label + "," + y_label + ")"; }) .text(function(d) { return d.key; }) .attr('text-anchor', 'middle'); var rects = defect_g.selectAll('.rect') .data(function(d) { return [d]; }) .enter().append("rect") .attr("class", "rect") .attr("width", x_category(x_defect.rangeBand() - barPadding)) .attr("x", function(d) { return x_category(barPadding); }) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }); category_g .append("line") .style("stroke", "black") .style("stroke-width", "4px") .style("stroke-linecap","round") .attr("x1", function(d) { var bbox = this.parentNode.getBBox(); return bbox.width+7; }) .attr("y1", height) .attr("x2", function(d) { var bbox = this.parentNode.getBBox(); return bbox.width; }) .attr("y2", height + 50); 

 /* Styles go here */ body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } 

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Hello Plunker!</h1> </body> </html>