Могу ли я добавить литеральный элемент SVG с d3?

Я хотел бы добавить литеральный элемент SVG с d3.

Поэтому вместо написания

svg.selectAll("circle")            
    .data(data)                    
    .enter()                       
    .append("circle")    // etc etc

Я бы хотел:

svg.selectAll("circle")            
    .data(data)                    
    .enter()                       
    .append('<circle cx="158.9344262295082" cy="200" r="16" fill="red"></circle>')   

так что я мог бы создать сложный шаблон в другом месте (например, с дескрипторами), а затем скомпилировать его с помощью selection.append () и добавить его.

javascript,d3.js,svg,

9

Ответов: 3


2 принят

Вы можете сделать это, хотя не через функцию. Вместо этого вам нужно будет использовать функцию selection.html () .var svg = d3.selectAll("svg"); svg.selectAll("circle") .data([50, 100, 150]) .enter() .append("g") .attr("transform", function(d) { return "translate(" + [d, d] + ")"; }) .html('<circle r="16" fill="red"></circle>');

Это затрудняет использование в контексте объединения данных, но не невозможно. Это, вероятно, лучшее, что вы могли бы сделать, что связано с добавлением дополнительной группы SVG в DOM, которая, возможно, не так уж плоха:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500"></svg>
data

Я предполагаю, что, взяв этот ответ немного дальше, вы можете внедрить результат, который вы хотите визуализировать прямо в свой dataобъект. Таким образом, вы добавили код, который выглядел бы так:

.html(function(d) { return d.templatedHTML; });

На этом этапе, однако, остановитесь и задайте себе вопрос: «Для чего я пользуюсь D3?». D3 описывается как

Документы, управляемые данными

Если вы используете что-то вроде руля, то вы отнимаете одну из основных обязанностей, которые D3 был предназначен для (создания некоторого DOM из некоторых данных) и передачи его в какую-то другую библиотеку.

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


3

Нет, ты не можешь. Не верьте мне? Проверьте свои документы ЗДЕСЬ

То, что вы должны сделать, это вызов .append(), а затем несколько вызовов .attr(attr_name, attr_value)для установки значения каждого атрибута. D3 не работает как jQuery.


1

D3 не предоставляет эту функциональность, и это не имеет большого смысла (когда вы думаете о манипулировании элементами на основе данных).

Но, как примечание, вы можете реализовать свою собственную функцию для добавления литерального элемента SVG.

Это функция, созданная Крисом Виау , названная appendSVG:

d3.selection.prototype.appendSVG = 
    d3.selection.enter.prototype.appendSVG = function(SVGString) {
        return this.select(function() {
            return this.appendChild(document.importNode(new DOMParser()
                .parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + SVGString + 
            '</svg>', 'application/xml').documentElement.firstChild, true));
        });
    };

После расширения прототипа вы можете использовать его:

selection.appendSVG("<some literal SVG element>");  

Вот демонстрация. Сначала мы устанавливаем данные:

var data = [{x:30,y:50},{x:420,y:100},{x:160,y:150},{x:260,y:30}];

Затем мы добавляем наш буквальный элемент SVG обычным способом:

var myLiteral = svg.selectAll(".literal")
    .data(data)
    .enter()
    .appendSVG("<literal SVG here>");

И, наконец, мы установили позиции, используя translate:

.attr("transform", function(d){ 
    return "translate(" + d.x + "," + d.y + ")";
});

Проверьте фрагмент:

d3.selection.prototype.appendSVG = d3.selection.enter.prototype.appendSVG = function(SVGString) {return this.select(function() { return this.appendChild(document.importNode(new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + SVGString + '</svg>', 'application/xml').documentElement.firstChild, true));});};

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 300);

var data = [{x:30,y:50},{x:420,y:100},{x:160,y:150},{x:260,y:30}];
		
var myLiteral = svg.selectAll(".literal")
  .data(data)
  .enter()
  .appendSVG("<path d='M 22.889471,25.607172 C 22.589713,24.605127 24.092318,24.708731 24.554936,25.108955 C 25.808602,26.193538 25.053398,28.14136 23.885905,28.938102 C 21.797533,30.363287 19.018523,29.16303 17.893076,27.101823 C 16.241437,24.076919 17.936475,20.36976 20.896603,18.945312 C 24.841988,17.046747 29.504523,19.25402 31.216796,23.116087 C 33.371517,27.976105 30.644503,33.605344 25.878773,35.599962 C 20.106834,38.015712 13.505062,34.765112 11.231216,29.094691 C 8.551568,22.412295 12.327973,14.834577 18.903736,12.283452 C 26.495714,9.3380778 35.051552,13.641683 37.878656,21.12322 C 41.09099,29.624218 36.259254,39.159651 27.87164,42.261821 C 18.462006,45.741988 7.9459296,40.381466 4.5693566,31.087558 C 0.82072068,20.769559 6.7105029,9.2720694 16.910868,5.6215926' style='fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'/>")
  .attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

JavaScript, d3.js, SVG,