Weighted Tree Color and Opacity of Tree Structure

← Back to discussions

In Progress

Posted in: Product Support
Paul

April 17, 2016 at 5:44 pm #6110

Great work on the visualization and the accompanying documentation! I’m trying to remove the variable line width based on the data as well as trying to selectively set color. I’ve been playing with .value, commenting out return Number(d["agg_" + valueField]) }) and inserting return Number(10) }) which did make all of the lines uniform in width, however the value I’m passing doesn’t seem to be affecting the width.

Is there a way to selectively set width and instead of assigning colors via the skin, could they be deliberately set or based on value ranges rather than a calculation? As an example; 1-3 = green, 4-7 yellow, 8-10 red.

I’ve been hunting in Dev Tool within chrome for some hints and can manipulate width and color by changing the following:
```
element.style {
    stroke-linecap: round;
    stroke: rgb(152, 43, 154);
    stroke-opacity: 0.35;
    stroke-width: 3;
}
```
If you could point me in the right direction, it would be much appreciated.
vizuly

April 17, 2016 at 6:02 pm #6111

Hi Paul,

You are headed in the right direction. Typically you want to use the theme/skin to adjust the styles of the visualization and the viz code to update to update layout. Something like the stroke-width is a little of both. In this case, the stroke width is being set in the viz/weightedtree.js file, in the update() routine at line 322:
```
link.transition()
            .duration(scope.duration)
            .attr("d", diagonal)
            .style("stroke-width",function (d) {
                return nodeRadius(d.target)*2});
```
You have two choices. You can either modify this core file OR adjust it after the fact in the theme file (theme/weightedtree.js) at line 119:
```
selection.selectAll(".vz-weighted_tree-link")
            .style("stroke",function (d) { return skin.link_stroke(d) })
            .style("stroke-opacity", function (d) { return skin.link_stroke_opacity(d)});
```
Probably best to make both changes in the theme file. For the stroke color you could simply do something link this in the theme file.
```
selection.selectAll(".vz-weighted_tree-link")
  .style("stroke-width",function (d) { return myConstantWidth; })
  .style("stroke",function (d) { return (d.myValue > 0 && d.myValue < 4) ? "#0F0" : (d.myValue >=4 && d.myValue <=7) ? "#FF0" : "#F00" })
```
(I am just writing this off the top of my head as an example, so you would want to test it out.

I hope that helps.

– Tom
|

Viewing 1 reply thread

You must be logged in to reply to this topic.

Search Forums

Premium Support