D3plus选项对图表没有影响

Question

I originally posted this on the D3plus Google group but haven't recieved any response, so seeing if anyone here knows anything.

I've created a Treemap using D3plus and would like to edit the tooltip. I'd like to add a % suffix to one of the values and I'd like to remove the 'share' line altogether. I'd also like to change the global font size.

Here are the variables I've added...

var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id("name")
.size("value")
.font( {"size":10 } )//to change font size
.color("growth")
.format({

  "number": function(number, key) {

    var formatted = d3plus.number.format(number, key)

    if (key === "growth") {
      return formatted + " %"
    }
    else {
      return formatted
    }

  }
}) // to add prefix
.draw()


});

They seem to have no effect whatsoever

Here is a link to my chart... http://thetally.efinancialnews.com/tallyassets/pensions2/index.html Maybe I've made a mistake in the order I call the code or something but I'm really stuck,

Thanks in advance for any ideas

Answer 1

Check the key variable, that d3plus passes to the function you provide for the number formatting. It's an object. To check against your "growth" key use key.key:

.format({

  "number": function(number, key) {

    var formatted = d3plus.number.format(number, key)

    if (key.key === "growth") {
      return formatted + " %"
    }
    else {
      return formatted
    }

  }
})

To remove the "share" line in the tooltip use the corresponding key:

.tooltip({
    "share": false
})  

Unfortunately I could not change the font size - only changing the font family seems to work ...

.font({ "family": "Times" })

Answer 2

I think in the place of .font( {"size":10 } ) you should put .font( {"size":10,"resize"=false } ) in your code because, By default it is true and u can't change the size if the resize is activated.
I hope that could help