javascript - How to add line and text as a label to a rectangle in D3? -
i have bar looks this, values b , c change little bit in data follow same sort of trend , out of 100.
the trouble having how add lines in centre of each of graphs little bit of text on each one. have tried appending path doesn't work reason.
another issue having how make entire bar have whole striped white lines going across go underneath. answer here doesn't change bars me. have place bar on top of these line gradient too?
var = 89; var b = 6; var c = 5; var = 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);
like this? see this
var = 89; var b = 6; var c = 5; var = 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 = ['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 short cant add 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>wiki
Comments
Post a Comment