stackoom
  简体   繁体   中英

Show values for half donut pie chart in D3 JS

 原文  2019-01-07 13:16:24  3   2    javascript/ html/ css/ d3.js/ svg

Question

I'm trying to display labels with its value and tooltip in semi donut pie chart using D3 JS. I'm not able to display labels and their values at the simultaneously. And how can I add the tooltip on this chart?

I tried implementing this fiddle. https://jsfiddle.net/SampathPerOxide/hcvuqjt2/6/ 

var width = 400;
var height = 300; //this is the double because are showing just the half of the pie
var radius = Math.min(width, height) / 2;

var labelr = radius + 30; // radius for label anchor
//array of colors for the pie (in the same order as the dataset)
var color = d3.scale
  .ordinal()
  .range(['#2b5eac', '#0dadd3', '#ffea61', '#ff917e', '#ff3e41']);

data = [
  { label: 'CDU', value: 10 },
  { label: 'SPD', value: 15 },
  { label: 'Die Grünen', value: 8 },
  { label: 'Die Mitte', value: 1 },
  { label: 'Frei Wähler', value: 3 }
];

var vis = d3
  .select('#chart')
  .append('svg') //create the SVG element inside the <body>
  .data([data]) //associate our data with the document
  .attr('width', width) //set the width and height of our visualization (these will be attributes of the <svg> tag
  .attr('height', height)
  .append('svg:g') //make a group to hold our pie chart
  .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); //move the center of the pie chart from 0, 0 to radius, radius

var arc = d3.svg
  .arc() //this will create <path> elements for us using arc data
  .innerRadius(79)
  //                                .outerRadius(radius);
  .outerRadius(radius - 10); // full height semi pie
//.innerRadius(0);

var pie = d3.layout
  .pie() //this will create arc data for us given a list of values
  .startAngle(-90 * (Math.PI / 180))
  .endAngle(90 * (Math.PI / 180))
  .padAngle(0.02) // some space between slices
  .sort(null) //No! we don't want to order it by size
  .value(function(d) {
    return d.value;
  }); //we must tell it out to access the value of each element in our data array

var arcs = vis
  .selectAll('g.slice') //this selects all <g> elements with class slice (there aren't any yet)
  .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
  .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
  .append('svg:g') //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
  .attr('class', 'slice'); //allow us to style things in the slices (like text)

arcs
  .append('svg:path')
  .attr('fill', function(d, i) {
    return color(i);
  }) //set the color for each slice to be chosen from the color function defined above
  .attr('d', arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function

arcs
  .append('svg:text')
  .attr('class', 'labels') //add a label to each slice
  .attr('fill', 'grey')
  .attr('transform', function(d) {
    var c = arc.centroid(d),
      xp = c[0],
      yp = c[1],
      // pythagorean theorem for hypotenuse
      hp = Math.sqrt(xp * xp + yp * yp);
    return 'translate(' + (xp / hp) * labelr + ',' + (yp / hp) * labelr + ')';
  })
  .attr('text-anchor', 'middle') //center the text on it's origin
  .text(function(d, i) {
    return data[i].value;
  })
  .text(function(d, i) {
    return data[i].label;
  }); //get the label from our original data array

I'm trying to achieve this. https://i.imgur.com/kTXeAXt.png 预期图

2 answers

solution1
 1  2019-01-07 14:22:19

First of all, if you console.log the data (from .data(pie) ) you used for displaying text label and value, you will noticed that label can only be access via d.data.label instead of data[i].label .

{data: {label: "Frei Wähler", value: 3}, value: 3, startAngle: 1.304180706233562, endAngle: 1.5707963267948966, padAngle: 0.02}

Therefore in order to correctly display both label and value, the code should be:

arcs.append("svg:text")      
    .attr("class", "labels")//add a label to each slice
    .attr("fill", "grey")
    .attr("transform", function(d) {
        var c = arc.centroid(d),
        xp = c[0],
        yp = c[1],
        // pythagorean theorem for hypotenuse
        hp = Math.sqrt(xp*xp + yp*yp);
        return "translate(" + (xp/hp * labelr) +  ',' +
          (yp/hp * labelr) +  ")"; 
     })
    .attr("text-anchor", "middle")    //center the text on it's origin
    .text(function(d, i) { return d.data.value; })
    .text(function(d, i) { return d.data.label; });

How to add tooltip

As for how to create d3 tooltip, it needs a little of css, html and then add d3 event handling.

1) add the following html to your index.html: 

 <div id="tooltip" class="hidden"><p id="tooltip-data"></p></div>

2) add a little bit css to set the div to position:absolute and hide the tooltip with display:none , and gives it a little bit styling per your preference: 

<style>
  #tooltip {
    position:absolute;
    background: #ffffe0;
    color: black;
    width: 180px;
    border-radius: 3px;
    box-shadow: 2px 2px 6px rgba(40, 40, 40, 0.5);
  }
  #tooltip.hidden {
    display:none;
  }
  #tooltip p {
    margin: 0px;
    padding: 8px;
    font-size: 12px;
  }

3) We then add mouseover event handler, the idea is when the mouse is over the chart, we will set the top and left properties of the #tooltip css style to where the mouse is, and set the css display property to show the tooltip. 

//tooltip
arcs.on("mouseover", function(d) {
  d3.select("#tooltip")
    .style("left", `${d3.event.clientX}px`)
    .style("top", `${d3.event.clientY}px`)
    .classed("hidden", false);
  d3.select("#tooltip-data")
    .html(`Label: ${d.data.label}<br>Value: ${d.data.value}`);
});

arcs.on("mouseout", function(d) {
  d3.select("#tooltip")
    .classed("hidden", true);
});

solution2
 0 ACCPTED  2019-01-07 13:21:23

selection.text([value])

If a value is specified, sets the text content to the specified value on all selected elements, replacing any existing child elements.

So you are setting the text content with the value and immediately replacing it with the label.

What you can do is return a combined string from the value and label of your datum in a template literal like this:

.text(function(d, i) { return `${data[i].value} - ${data[i].label}`; })


 var width = 400; var height = 300; //this is the double because are showing just the half of the pie var radius = Math.min(width, height) / 2; var labelr = radius + 30; // radius for label anchor //array of colors for the pie (in the same order as the dataset) var color = d3.scale.ordinal() .range(['#2b5eac', '#0dadd3', '#ffea61', '#ff917e', '#ff3e41']); data = [{ label: 'CDU', value: 10 }, { label: 'SPD', value: 15 }, { label: 'Die Grünen', value: 8 }, { label: 'Die Mitte', value: 1 }, { label: 'Frei Wähler', value: 3 } ]; var vis = d3.select("#chart") .append("svg") //create the SVG element inside the <body> .data([data]) //associate our data with the document .attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag .attr("height", height) .append("svg:g") //make a group to hold our pie chart .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')'); //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create <path> elements for us using arc data .innerRadius(79) // .outerRadius(radius); .outerRadius(radius - 10) // full height semi pie //.innerRadius(0); var pie = d3.layout.pie() //this will create arc data for us given a list of values .startAngle(-90 * (Math.PI / 180)) .endAngle(90 * (Math.PI / 180)) .padAngle(.02) // some space between slices .sort(null) //No! we don't want to order it by size .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); }) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function arcs.append("svg:text") .attr("class", "labels") //add a label to each slice .attr("fill", "grey") .attr("transform", function(d) { var c = arc.centroid(d), xp = c[0], yp = c[1], // pythagorean theorem for hypotenuse hp = Math.sqrt(xp * xp + yp * yp); return "translate(" + (xp / hp * labelr) + ',' + (yp / hp * labelr) + ")"; }) .attr("text-anchor", "middle") //center the text on it's origin .text(function(d, i) { return `${data[i].value} - ${data[i].label}`; });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <div id="chart" style="width: 330px;height: 200px;"></div>

Edit:

If you want the two text strings to be on separate lines you would have to append some <tspan> elements and position them. 

 var width = 400; var height = 300; //this is the double because are showing just the half of the pie var radius = Math.min(width, height) / 2; var labelr = radius + 30; // radius for label anchor //array of colors for the pie (in the same order as the dataset) var color = d3.scale.ordinal() .range(['#2b5eac', '#0dadd3', '#ffea61', '#ff917e', '#ff3e41']); data = [{ label: 'CDU', value: 10 }, { label: 'SPD', value: 15 }, { label: 'Die Grünen', value: 8 }, { label: 'Die Mitte', value: 1 }, { label: 'Frei Wähler', value: 3 } ]; var vis = d3.select("#chart") .append("svg") //create the SVG element inside the <body> .data([data]) //associate our data with the document .attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag .attr("height", height) .append("svg:g") //make a group to hold our pie chart .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')'); //move the center of the pie chart from 0, 0 to radius, radius var arc = d3.svg.arc() //this will create <path> elements for us using arc data .innerRadius(79) // .outerRadius(radius); .outerRadius(radius - 10) // full height semi pie //.innerRadius(0); var pie = d3.layout.pie() //this will create arc data for us given a list of values .startAngle(-90 * (Math.PI / 180)) .endAngle(90 * (Math.PI / 180)) .padAngle(.02) // some space between slices .sort(null) //No! we don't want to order it by size .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) .attr("class", "slice"); //allow us to style things in the slices (like text) arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); }) //set the color for each slice to be chosen from the color function defined above .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function const textEl = arcs.append("svg:text") .attr("class", "labels") //add a label to each slice .attr("fill", "grey") .attr("transform", function(d) { var c = arc.centroid(d), xp = c[0], yp = c[1], // pythagorean theorem for hypotenuse hp = Math.sqrt(xp * xp + yp * yp); return "translate(" + (xp / hp * labelr) + ',' + (yp / hp * labelr) + ")"; }) .attr("text-anchor", "middle"); //center the text on it's origin textEl.append('tspan') .text(function(d, i) { return data[i].label; }); textEl.append('tspan') .text(function(d, i) { return data[i].value; }) .attr('x', '0') .attr('dy', '1.2em');
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <div id="chart" style="width: 330px;height: 200px;"></div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question D3 - Placing labels and lines on a half pie/half donut chart Pie (donut) chart segment order in D3 Transition on labels in d3 pie/donut chart Multilevel D3 Pie/Donut-chart doesnt show and no error messages Donut chart in D3 JS Sankey diagram D3 - Polylines from label to arc in Donut or Pie Chart Use mouseover in pie chart and show label in d3 js Donut chart in d3 How to tell d3js that this half donut chart should fill values from left to right corner How to add drop shadow to d3.js pie or donut chart
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM