Weighted Tree - changing the font size

← Back to discussions

In Progress

Posted in: Product Support
mcrocker

October 9, 2017 at 9:42 pm #8065

Hi Tom,

The Weighted Tree is an amazing visualization. I’m looking to modify it to show university student progression from semester to semester.

This is the first time I’ve used D3.js and not very familiar with JavaScript. I’ve made ok progress making a few simple modifications.

I’m looking to include more levels in the visualization. I’ve added the levels but now the font overlaps in the tree when in “Axiis” theme. Is there a way to reduce the font size?

My knowledge is limited so sorry but I would require a very clear instruction on where to go to make the change. Even if the font size was similar to the “None” theme, this would help.

Any help would be greatly appreciated,
Michael

vizuly

October 10, 2017 at 9:50 am #8066

Hi Michael,

There are a couple of ways you could change the font size. The current one is being dynamically generated based on the width of the tree.

If you prefer to fix the font to a specific size and you are using the Axiis theme you can adjust the following line in the src/theme/weightedtree.js file.

Near the top you will see a line that starts with “var skins = …” locate the Axiis skin (the first one, and near the bottom of that skin definition around line number 40 you would have to change this line (for a 10px high font)

font_size: function () { return fontSize + "px"; }

to

font_size: function () { return "10px" ; }

Also be sure that you are referencing the source files versus the minified files at the top as described in our “Getting Started” article. This will ensure that your HTML page is using the source files you have just modified (versus the compiled minified files that won’t have these changes in them.)

I hope that helps point you in the right direction.

Kind Regards,

Tom

mcrocker

October 11, 2017 at 9:18 pm #8068

thanks Tom, I’ve made the change and font size adjusted.

Patrick

March 18, 2018 at 7:21 pm #8264

Tom warns us:

Also be sure that you are referencing the source files versus the minified files at the top as described in our “Getting Started” article. This will ensure that your HTML page is using the source files you have just modified (versus the compiled minified files that won’t have these changes in them.)

My question is How do I reference that source file? Do I change this line in the HTML file?

<!– D3.js … of course! –>
<script src=”lib/d3.min.js”></script>

I’m trying to leave less white space, particularly on the right hand side of the plot. Do I do it in the same part of the .js file?

TIA
vizuly

March 19, 2018 at 7:31 am #8271

Hello Patrick,

For the white space you can adjust the margin of the chart by passing in a margin object like this:

viz.margin({top:10, left:10, bottom:10, right:0})

Or what ever values you want to use for each margin.

For the file references simply uncomment these files listed below and comment out the two references to these two files:

Comment Out:
```
<script src=”lib/vizuly_core.min.js”>
<script src=”lib/vizuly_radialprogress.min.js”>
```
Uncomment These:
```
 <script src="../src/namespace/namespace.js">
 <script src="../src/theme/_theme.js">
 <script src="../src/theme/radialprogress.js">
 <script src="../src/core/component.js">
 <script src="../src/core/util.js">
 <script src="../src/core/color.js">
 <script src="../src/core/format.js">
 <script src="../src/svg/_svg.js">
 <script src="../src/svg/gradient.js">
 <script src="../src/svg/filter.js">
 <script src="../src/component/_viz.js">
 <script src="../src/component/radialprogress.js">
```
Cheers,

Tom
Patrick

March 19, 2018 at 6:56 pm #8275

Thank you Tom. That was very helpful. You said:
For the white space you can adjust the margin of the chart by passing in a margin object like this:
```
viz.margin({top:10, left:10, bottom:10, right:0})
```
Or what ever values you want to use for each margin.
I couldn’t tell where I should do that, but I achieved what I wanted by editing

src/viz/weightedtree.js

Beginning about line 75, there’s a section for editing margins between tree and the borders of the container. Is that good practice?

Related to my question, I’d like to increase the x dimension of the branches, but I can’t find where to do so. I increased the number of characters of branch labels from 20 to 30 successfully, and now I want to spread them more in the horizontal direction, now that I have unused space.

Your help is much appreciated.
vizuly

March 20, 2018 at 10:12 am #8286

Hello Patrick,

As far as the margin goes, you shouldn’t have to adjust the code in the weightedtree.js file. You simply pass in that margin object from the test container where you are setting the size, height, data etc of the tree. You would set it in the weightedtree_test.js file, from outside the component. But what you did would work as well.

In regards to the horizontal spacing you can actually specify in pixels the separation width you want by calling the
viz.fixedSpan(200)
or something like that. This would set the space between branch levels to 200 pixels. You do this as well from the test container and you shouldn’t have to modify the component.

I hope that helps.

Cheers,

Tom

Patrick

March 20, 2018 at 2:45 pm #8288

Thanks, Tom. That’s exactly what I needed.
|

Viewing 7 reply threads

You must be logged in to reply to this topic.

Search Forums

Premium Support