venn.js - диаграмма JS venn - не могу повторить пример кода - PullRequest
Новая
       67

venn.js - диаграмма JS venn - не могу повторить пример кода

0 голосов
/ 20 февраля 2019

Я нашел хороший пакет JS, который производит диаграммы Венна.Я пытаюсь повторить пример кода с несколькими новыми значениями, но пока что безуспешно.

Запись в блоге: https://www.benfrederickson.com/venn-diagrams-with-d3.js/

Github: https://github.com/benfred/venn.js

Пример: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

Я сократил свой код до минимума ниже: 

    <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .venntooltip {
            position: absolute;
            text-align: center;
            width: 128px;
            height: 16px;
            background: #333;
            color: #ddd;
            padding: 2px;
            border: 0px;
            border-radius: 8px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="venn"></div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="http://benfred.github.io/venn.js/venn.js"></script>
    <script>
        // define sets and set set intersections
        var sets = [{ "sets": [0], "size": 3683, "label": "0 X" }, { "sets": [1], "size": 3650, "label": "1 X" }, { "sets": [2], "size": 4800, "label": "2 X" }, { "sets": [0, 2], "size": 866 }, { "sets": [1, 2], "size": 833 }, { "sets": [0, 1, 2], "size": 2817 }];

        var chart = venn.VennDiagram().width(1024).height(1024);

        var div = d3.select("#venn")
        div.datum(sets).call(chart);
    </script>
</body>

</html>

Что я должен получить из этогопростой SVG с тремя перекрывающимися кругами.

Я предполагаю, что у меня что-то не так в моем var sets, однако я пытался настроить это в течение пары часов, но у меня ничего не получилось.

Может кто-нибудь указать мне, что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Все, хотя я не до конца понимаю, почему, следующее было решением для меня.Мне нужно было добавить дополнительный набор, который явно определил тот факт, что кружок 0 и кружок 1 перекрываются.Я также подправил значение «размер», чтобы было легче мысленно следовать ему. 

 <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .venntooltip {
            position: absolute;
            text-align: center;
            width: 128px;
            height: 16px;
            background: #333;
            color: #ddd;
            padding: 2px;
            border: 0px;
            border-radius: 8px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="venn"></div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="http://benfred.github.io/venn.js/venn.js"></script>
    <script>
        // define sets and set set intersections
        var sets = [
            { "sets": [0], "size": 100, "label": "0 X" },
            { "sets": [1], "size": 100, "label": "1 X" },
            { "sets": [2], "size": 100, "label": "2 X" },
            { "sets": [0, 1], "size": 50 },
            { "sets": [0, 2], "size": 50 },
            { "sets": [1, 2], "size": 50 },
            { "sets": [0, 1, 2], "size": 25 }];

        var chart = venn.VennDiagram().width(1024).height(1024);

        var div = d3.select("#venn")
        div.datum(sets).call(chart);
    </script>
</body>

</html>
0 голосов
/ 20 февраля 2019

Я попробовал ваш код выше, и он отлично работал на http-сервере, но не работал в jsFiddle.Это может быть ваша среда разработки или браузер.Даже двойной щелчок по файлу .html вытащил его в Chrome, правильно отобразив SVG: 

<svg width="1024" height="1024"><g class="venn-area venn-circle" data-venn-sets="0"><path d="
M 807.1589756762538 512 
m -201.8410243237462 0 
a 201.8410243237462 201.8410243237462 0 1 0 403.6820486474924 0 
a 201.8410243237462 201.8410243237462 0 1 0 -403.6820486474924 0" style="fill-opacity: 0.25; fill: rgb(31, 119, 180);"></path><text class="label" text-anchor="middle" dy=".35em" x="876" y="511" style="fill: rgb(31, 119, 180);"><tspan x="876" y="511" dy="0.35em">0 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="1"><path d="
M 215.93473308618636 512 
m -200.93473308618638 0 
a 200.93473308618638 200.93473308618638 0 1 0 401.86946617237277 0 
a 200.93473308618638 200.93473308618638 0 1 0 -401.86946617237277 0" style="fill-opacity: 0.25; fill: rgb(255, 127, 14);"></path><text class="label" text-anchor="middle" dy=".35em" x="148" y="511" style="fill: rgb(255, 127, 14);"><tspan x="148" y="511" dy="0.35em">1 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="2"><path d="
M 512.8582181751124 512 
m -230.42479022003167 0 
a 230.42479022003167 230.42479022003167 0 1 0 460.84958044006333 0 
a 230.42479022003167 230.42479022003167 0 1 0 -460.84958044006333 0" style="fill-opacity: 0.25; fill: rgb(44, 160, 44);"></path><text class="label" text-anchor="middle" dy=".35em" x="511" y="397" style="fill: rgb(44, 160, 44);"><tspan x="511" y="397" dy="0.35em">2 X</tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_2"><path d="
M 681.000362208242 669.5557150594287 
A 201.8410243237462 201.8410243237462 0 0 1 681.000362208242 354.44428494057126 
A 230.42479022003167 230.42479022003167 0 0 1 681.000362208242 669.5557150594287" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="674" y="512" style="fill: rgb(68, 68, 68);"><tspan x="674" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="1_2"><path d="
M 342.9754402017427 667.6773127208855 
A 230.42479022003167 230.42479022003167 0 0 1 342.9754402017427 356.32268727911446 
A 200.93473308618638 200.93473308618638 0 0 1 342.9754402017427 667.6773127208855" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="349" y="512" style="fill: rgb(68, 68, 68);"><tspan x="349" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_1_2"><path d="M 0 0" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="0" y="-1000" style="fill: rgb(68, 68, 68);"><tspan x="0" y="-1000" dy="0.35em"></tspan></text></g></svg>

Я использовал эту точную библиотеку в производстве несколько лет назад - это было сложно.Ключ должен внимательно посмотреть на размер: цифры.Мы столкнулись с данными с достаточным количеством взаимосвязей, что (в некоторых случаях) было невозможно воспроизвести Венну.Это будет тихая ошибка и не все отношения рендерится.Таким образом, мы добавили polyfill, который будет перерисовывать (множественные множества), пока не будут показаны все отношения.

Вы просто видите белый экран?Одна вещь, которую я хотел бы сделать, это загрузить два файла .js и ссылаться на них локально.Это может помочь.Проверьте журнал консоли на наличие ошибок.Chrome DevTools может помочь.Кроме того, я использую http-сервер от npm.Просто введите http-сервер в любой каталог, а затем путь к вашему .html, и он будет там на http://localhost:8080/path/to/your/venn.html.

Надеюсь, это поможет.

...