如何将行和文本作为标签添加到D3中的矩形？

Question

我有一个看起来像这样的栏，A B和C的值确实在数据中有所改变，但都遵循相同的趋势，超过100。

我现在遇到的麻烦是如何在每个图形的中心添加线条，每个图形上都有一些文字。我试过添加一条路径，但由于某种原因它没有用。

我遇到的另一个问题是如何使整个条纹有整条条纹的白线穿过它但是在下面。答案here并没有改变我的标准。我是否还必须使用线条渐变在其上放置另一个条形图呢？

var A = 89;
var B = 6;
var C = 5;

var A = parseInt(A);
var B = parseInt(B);
var C = parseInt(C);

var margin = {
  top: 60,
  right: 70,
  bottom: 40,
  left: 65
}


var width = '100%';
var data = [{
  "Percentage": (A + B + C),
  "Name": "A"
}, {
  "Percentage": (B + C),
  "Name": "B"
}, {
  "Percentage": C,
  "Name": "C"
}]; 
var data1 = [A, B, C];
var chart = d3.select("#ChartAreaDiv").append("svg") 
  .attr("class", "chart")
  .attr("width", width)
  .attr("height", 200 - margin.top - margin.bottom)

var x = d3.scaleLinear() 
  .domain([0, d3.max(data, function(d) {
    return d.Percentage;
  })])
  .range([0, width]);

  var x1 = d3.scaleLinear() 
    .domain([0, d3.max(data1, function(d) {
      return d.Percentage;
    })])
    .range([0, width]);

chart.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("width", function(d) { 
    return x(d.Percentage);
  })
  .attr("height", 30)
  .attr("rx", 4)
  .attr("ry", 4);

chart.selectAll("text") 
.data(data)
.enter().append("text")
.attr("x", function(d) { 
return x(d.Percentage);
})
.attr("y", 15) 
.attr("dx", -10) 
.attr("dy", ".42em") 
.attr("text-anchor", "middle") 
.style("font-weight", "bold")
.data(data1)
.text(String);

chart.append("path")
.data(data)
.enter().append("path")
.attr("stroke-width", 2)
.style("stroke", "grey")
.attr("x1", function(d) { 
return x(d.Percentage)/2;
})
.attr("x1", function(d) { 
return x(d.Percentage)/2;
})
.attr('y1', 30)
.attr('y2', 50);

Answer 1

喜欢这个？ see this

var A = 89;
var B = 6;
var C = 5;

var A = parseInt(A);
var B = parseInt(B);
var C = parseInt(C);

var margin = {
  top: 60,
  right: 70,
  bottom: 40,
  left: 65
}


var width = '100%';
var data = [{
  "Percentage": (A + B + C),
  "Name": "A"
}, {
  "Percentage": (B + C),
  "Name": "B"
}, {
  "Percentage": C,
  "Name": "C"
}]; 
var data1 = [A, B, C];
var chart = d3.select("#ChartAreaDiv").append("svg") 
  .attr("class", "chart")
  .attr("width", width)
  .attr("height", 200 - margin.top - margin.bottom)
//Pattern injection
var defs = chart.append("defs")
var pattern = chart.append("pattern")
  .data(data)
  .enter()
.selectAll("pattern")
.attr('id',"hash4_4")
.attr('width',"8")
.attr('height',"8")
.attr('patternUnits',"userSpaceOnUse")
.attr('patternTransform',"rotate(-45)")
.append("rect")
.attr( 'width',"4")
.attr('height',"8")
.attr('transform',"translate(0,0)") 
.attr('fill',"black" )
.style('opacity',0.1)

var x = d3.scaleLinear() 
  .domain([0, d3.max(data, function(d) {
    return d.Percentage;
  })])
  .range([0, width]);

  var x1 = d3.scaleLinear() 
    .domain([0, d3.max(data1, function(d) {
      return d.Percentage;
    })])
    .range([0, width]);

  var a = ['red','green','blue']
  
  

  
chart.selectAll("myrect")
  .data(data)
  .enter()
  .append("rect")
  .attr('class','myrect')
  .attr("width", function(d) { 
    return x(d.Percentage);
  })
  .attr("height", 30)
  .attr("rx", 4)
  .attr("ry", 4)

  //.attr('fill',"url(#hash4_4)")
  .attr("fill",  function(d,i) {return a[i]})
  //.attr("fill",  function(d,i) {return a[i]})

  .attr('id',function(d,i) {return d['Name']})
  
chart.selectAll("myrect")
  .data(data)
  .enter()
  .append("rect")
  .attr('class','myrect')
  .attr("width", function(d) { 
  //console.log(x(d.Percentage));
    return x(d.Percentage);
  })


  .attr("height", 30)
  .attr("rx", 4)
  .attr("ry", 4)

  .attr('fill',"url(#hash4_4)")
  //.attr("fill",  function(d,i) {return a[i]})
  //.attr("fill",  function(d,i) {return a[i]})

  .attr('id',function(d,i) {return d['Name']})

chart.selectAll("text") 
.data(data)
.enter().append("text")
.attr("x", function(d) { 
 
return x(d.Percentage);
})

.attr("y", 15) 
.attr("dx", -10) 
.attr("dy", ".42em") 
.attr("text-anchor", "middle") 
.style("font-weight", "bold")
.attr("fill", "white")
.data(data1)
.text(String);





var line_text = d3.select("svg").append('g');

data.forEach(function(d,i){
  var data_idx =i
   line_text.append('rect')
      .data([d])
      .attr("width", 1)
      .attr("height", 30)
   
      .attr('x',function(d,i){
     //console.log(data_idx,d['Name'])
     if (data_idx==0){
       return $('#'+d['Name']).width()/2
     }else if(data_idx==1){
       return $('#'+d['Name']).width()/2+$('#'+data[2]['Name']).width()/2
     }else if(data_idx==2){
       return $('#'+d['Name']).width()/2
     }
   
       })
       .attr('y',33)
      .attr('fill', 'grey')
   .text('kkkkk')

  
})

var text = d3.select("svg").append('g');

text.selectAll("text") 
.data(data)
.enter().append("text")
.attr("x", function(d,i) { 
 
     if (i==0){
       return $('#'+d['Name']).width()/2
     }else if(i==1){
       return $('#'+d['Name']).width()/2+$('#'+data[2]['Name']).width()/2
     }else if(i==2){
       return $('#'+d['Name']).width()/2
     }
})

.attr("y", 70) 

.attr("dy", ".42em") 
.attr("text-anchor", "middle") 
.style("font-weight", "bold")
.attr("fill", "grey")
.text(function(d,i){
  return d.Name
});

var comment = d3.select("svg").append('g');
comment
.append("text")
.attr("x", $('svg').width()/2)
.attr("y", 97) 
.attr("text-anchor", "middle") 
.style("font-weight", "bold")
.style("font-size", 12)
.attr("fill", "darkblue")
.text('"This is to Short Cant Add Some Info"');

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id ="ChartAreaDiv"></div>
<script>
  </script>
</body>
</html>