Whilst small files can be uploaded to forum posts, if you have a custom theme or module to contribute please add it on the "Add-ons" page.
  • Page:
  • 1
  • 2

TOPIC: Module - Ancestral fan chart using d3.js

Module - Ancestral fan chart using d3.js 2 years 9 months ago #1

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
Hi,

since the current fan chart module does not function quite properly (labels not placed correctly etc.), I have created an SVG version as an replacement for the module "fan_chart". It uses the javascript library D3. You can find the module on Github at https://github.com/magicsunday/ancestral-fan-chart.

Best regards,
Rico


Current version: v1.7

You can download it at github.com/magicsunday/ancestral-fan-chart/releases/tag/v1.7 or www.webtrees.net/index.php/en/add-ons/do...-ancestral-fan-chart

Whats new?

- Added gradient colors
- Updated README
- Added Hebrew, Finnish and Swedish language files
- Support RTL text
- Use composer to install the module
composer require magicsunday/ancestral-fan-chart --update-no-dev


Please report any issue at github.com/magicsunday/ancestral-fan-chart
webtrees, latest dev
PHP 7.1.8
Last Edit: 1 year 2 months ago by magic-sunday.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #2

  • jprause
  • jprause's Avatar
  • Offline
  • Junior
  • Posts: 132
Hi Rico,
please add the following step 3a to the Installation Guide:

Rename the folder 'ancestral-fan-chart-master' to 'ancestral-fan-chart'.
Josef

local desktop:-- webtrees 1.7.14, PHP version 7.2.19, MySQL 5.7.25, Apache2 2.4.29, Linux Ubuntu 18.04 64bit
webhosting:-- webtrees 1.7.14, PHP version 7.2.19, MySQL 5.7.21
testing webtrees 2.0.0-beta.3
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #3

  • markus
  • markus's Avatar
  • Offline
  • Junior
  • Posts: 117
Rico, looks much better than current version.
Greg mentioned in an old forum-entry that he plans to replace the current fanchart-output with a svg-version. Maybe you could cooperate to get this solution into the standard-wt-branch?
Best regards /Markus
webtrees 1.7.9 + latest updates + several addons
Last Edit: 2 years 9 months ago by markus. Reason: typo
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #4

  • mp
  • mp's Avatar
  • Offline
  • Junior
  • Posts: 233
Great. As if you have read my wishlist ...

Please look at the modification on a smaller screen (f.i. tablet). The circular font is not displayed correctly.
Martin - ffp.bauschaffen.de
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #5

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
With the new release the rendering on mobile devices should be fixed.
- github.com/magicsunday/ancestral-fan-chart/releases/latest
webtrees, latest dev
PHP 7.1.8
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #6

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
Yes. Now, it works fine with Opera and Chromium.
Superb !
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #7

  • mp
  • mp's Avatar
  • Offline
  • Junior
  • Posts: 233
Perfect. Looks great.

BTW, the selection menu is not centered below the chart header ... (with Justlight theme). :)
Martin - ffp.bauschaffen.de
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #8

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
Just one little thing with special html character nbsp;




And do you intend to make this chart an ImageMap as standard chart is ?
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
Last Edit: 2 years 9 months ago by Gustine.
The administrator has disabled public write access.
Do you need a web hosting solution for your webtrees site?
If you prefer a host that specialises in webtrees, the following page lists some suppliers able to provide one for you: 

Module - Ancestral fan chart using d3.js 2 years 9 months ago #9

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
Uh, how do you get the
 
into the name? I can't enter it at the individuals page. Its always escaped as HTML char.
And do you intend to make this chart an ImageMap as standard chart is ?
You mean, clicking on a name or arc? I was thinking about reloading/redrawing the chart with the data of a clicked person in the next release.
webtrees, latest dev
PHP 7.1.8
Last Edit: 2 years 9 months ago by magic-sunday.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #10

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
Uh, how do you get the nbsp;
It probably comes with french translation (tag NICK).
(look at gustine.eu/wt/module.php?mod=ancestral-fan-chart&rootid=I220 using english or french language)

You mean, clicking on a name or arc?
Yes
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
Last Edit: 2 years 9 months ago by Gustine.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #11

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
BTW, the selection menu is not centered below the chart header ... (with Justlight theme). :)

Its fixed in current master.
webtrees, latest dev
PHP 7.1.8
Last Edit: 2 years 9 months ago by magic-sunday.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #12

  • mp
  • mp's Avatar
  • Offline
  • Junior
  • Posts: 233
Thanks again. But I think you don't need this part of css:

#ancestral-fan-chart .list_table {
    margin: 0 auto;
 }


.list_table is defined in webtrees well. IMO. I have commented it out and it works.
Martin - ffp.bauschaffen.de
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #13

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
It probably comes with french translation (tag NICK).
(look at gustine.eu/wt/module.php?mod=ancestral-fan-chart&rootid=I220 using english or french language)

- (?) Are all the
 
in the french translation (fr.po) really necessary?

- I added an
html_entity_decode
to replace the
 
with a regular white space as HTML entities are not defined in SVG. Please download the current master version to test the change (github.com/magicsunday/ancestral-fan-chart/archive/master.zip).
webtrees, latest dev
PHP 7.1.8
Last Edit: 2 years 9 months ago by magic-sunday.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 9 months ago #14

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
You got that right. It works perfectly.
Thanks.
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #15

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
New version released: v1.3

You can download it at github.com/magicsunday/ancestral-fan-cha...estral-fan-chart.zip or www.webtrees.net/index.php/en/add-ons/do...-ancestral-fan-chart

Whats new?
  • Increased number of displayable generations to 10
  • Load/Update fan chart with the one of the clicked person
  • Added animated transition during chart update
  • Added scaling of chart according available display width
  • Smaller code improvements

Please report any issue at github.com/magicsunday/ancestral-fan-chart
webtrees, latest dev
PHP 7.1.8
Last Edit: 2 years 8 months ago by magic-sunday.
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #16

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
« Load/Update fan chart with the one of the clicked person » Fine !
I suggest a last improvement : a link in the center of the fan-chart towards this individual's page.
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #17

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
Gustine wrote:
I suggest a last improvement : a link in the center of the fan-chart towards this individual's page.

Has been added in v1.3.2

www.webtrees.net/index.php/en/add-ons/do...-ancestral-fan-chart
github.com/magicsunday/ancestral-fan-chart/releases/tag/v1.3.2
webtrees, latest dev
PHP 7.1.8
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #18

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 167
Many thanks. That works perfectly.
We can now navigate in the tree.

The only thing left to do is to integrate this module in the core code instead of the standard fanchart ;-)
webtrees 1.7.15 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3.11)
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #19

  • magic-sunday
  • magic-sunday's Avatar
  • Offline
  • New
  • Posts: 55
:-D
webtrees, latest dev
PHP 7.1.8
The administrator has disabled public write access.

Module - Ancestral fan chart using d3.js 2 years 8 months ago #20

  • kiwi
  • kiwi's Avatar
  • Offline
  • Platinum
  • Posts: 4965
Your version of the fan chart has an option to change the font size.
In the standard version that option changes the entire fan size.

Is that a deliberate choice, to change only the font size?

The problem is changing the font size (larger) doesn't really work well when the fan size remains the same. It would seem better if the entire fan AND the font size changed together.
Nigel

www.our-families.info

Hosted at:
Follow me at:
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Powered by Kunena Forum