CODEWITHSUNDEEP
javascriptcssjsonstringd3.js
Vince Cantuba
Vince Cantuba

Reputation: 39

D3.js - Adding and customizing texts in a graph

So I have this graphs and code now: http://jsfiddle.net/moqvfj65/17

  1. I want to format my middle numbers to % but i can't make it work. It returns a NaN value whenever i try to use d3.format How can i do that with my current code?

  2. How can i append a text below my arc chart? I want to put a description there (around 2-3 sentences) with enough spacing since this will be used in a dashboard. I tried group.append("text").attr("text-anchor", "bottom") but it doesn't work so it's not it.

  3. How can i change the font size, weight and style of the texts?

  4. Currently, i only use attr("fill", "red") line of code to color my graph and texts. How can i use an RGB/RGBA color scheme? I tried it with "fill" but it won't work.

Thank you guys!

Upvotes: 1

Views: 790

Answers (1)

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8930

From my understanding of the questions you have asked, you can do those in the following ways.

I want to format my middle numbers to % but i can't make it work. It returns a NaN value whenever i try to use d3.format How can i do that with my current code?

You can simply append a % sign to your text when you call the interpolate method.

group.append("text")
    .attr("text-anchor", "middle")
    .attr("alignment-baseline", "middle")
    .attr("fill", color)
    .text(d3.format(",.1%")(score/100))
    .transition()
    .duration(4000)
    .on("start", function() {
    d3.active(this)
      .tween("text", function() {
      var that = d3.select(this),
          i = d3.interpolateNumber(0, score);
      //return function(t) { that.text(format(i(t))); };
      return function(t) { that.text(format(i(t)) + '%'); };
    });
  });

Notice the line return function(t) { that.text(format(i(t)) + '%'); };

.

How can i append a text below my arc chart? I want to put a description there (around 2-3 sentences) with enough spacing since this will be used in a dashboard. I tried group.append("text").attr("text-anchor", "bottom") but it doesnt work so it's not it.

You can append a new group to your svg and set its text property. You can use the transform attribute to place it at the right place.

group.append("text")
    .text(description)
    .attr('transform', 'translate('+ (-r) + ',' + (r+50) + ')');

.

How can i change the font size, weight and style of the texts?

Use style() to set the styles.

group.append("text")
    .text(description)
    .attr('transform', 'translate('+ (-r) + ',' + (r+50) + ')')
    .style("font-size", "16px")
    .style("font-weight", "bold")

.

Currently, i only use attr("fill", "red") line of code to color my graph and texts. How can i use an RGB/RGBA color scheme? I tried it with "fill" but it won't work.

You can define your colors using rgb, textual name or the hex values.

var color1 = "orange",
    color2 = "#477225",
    color3 = "rgb(65, 244, 169)";

All these will work. Here's an updated fiddle of yours with all the above included.

http://jsfiddle.net/nimeshka/moqvfj65/65/

Hope it helps!!

Upvotes: 1

Related Questions