Вроде все перепробовал. Я вижу, что есть способы добавить теги к html-скрипту, один из которых создает тег <g ...>, в котором находится тег <rect ...>. Я хочу изображение вместо прямоугольника. Все это содержится в теге <svg ..>, поэтому я не знаю, имеет ли это значение...
Вот пример кода:
{
key: "_updateNodes",
value: function(t, n) {
var e = this;
n.forEach(function(t) {
return t.y = t.depth * e.getNodeDepthMultiplier()
});
var i = (n = this.getPanningContainer().selectAll("g.node").data(n, function(t) {
return e.getId.call(e, t.data)
})).enter().append("g").classed("node", !0).attr("transform", function(n, e, i) {
return "translate(" + t.y0 + "," + t.x0 + ")"
}).on("click", function(t, n, i) {
return e._onNodeClick.call(e, t, n, i)
});
Может быть, это поможет больше. Вы заметите там тег <image ...>; изображение не появляется.
<svg class="mitch-d3-tree default boxed-tree" preserveAspectRatio="xMidYMid meet" viewBox="0 0 960 800" style="width: 100%; height: 100%;">
<g class="view" transform="translate(100,40)">
<g class="panningContainer" transform="translate(210,0) scale(1)">
<g class="node expanded" transform="translate(0,360)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">FCA</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 24)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Jeep</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 72)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Dodge</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 120)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Ram</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 168)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Fleet</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 216)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Chrysler</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 264)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Fiat</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 312)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Alfa Romeo</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 360)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Mopar</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 408)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Maserati</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 456)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 0.19999999999999996) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="15px" font-weight="700" x="45px" y="15px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 15px; font-weight: 700; opacity: 1;">Ram</text>
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="15px" font-weight="700" x="45px" y="33px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 15px; font-weight: 700; opacity: 1;">Commercial</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 504)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Business Link</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 552)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">CPOV</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 600)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">Uconnect</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 648)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 9.2) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="15px" font-weight="700" x="45px" y="15px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 15px; font-weight: 700; opacity: 1;">Maserati CPOV</text>
</g>
</image>
</g>
<g class="node collapsed" transform="translate(300, 696)">
<g class="body-group">
<rect class="body-box" width="200" height="75" y="-37.5"></rect>
</g>
<image class="title-group" transform="translate(-33.333333333333336, -57.5)">
<image src="/static/FCA_Black.png" width="100" height="40"></image>
<g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto; fill-opacity: 0.3;">
<text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; font-family: "Arial Narrow"; font-size: 16px; font-weight: 700; opacity: 1;">RMF</text>
</g>
</image>
</g>
<path class="link" d="M300,24C250,24,250,360,200,360"></path>
<path class="link" d="M300,72C250,72,250,360,200,360"></path>
<path class="link" d="M300,120C250,120,250,360,200,360"></path>
<path class="link" d="M300,168C250,168,250,360,200,360"></path>
<path class="link" d="M300,216C250,216,250,360,200,360"></path>
<path class="link" d="M300,264C250,264,250,360,200,360"></path>
<path class="link" d="M300,312C250,312,250,360,200,360"></path>
<path class="link" d="M300,360C250,360,250,360,200,360"></path>
<path class="link" d="M300,408C250,408,250,360,200,360"></path>
<path class="link" d="M300,456C250,456,250,360,200,360"></path>
<path class="link" d="M300,504C250,504,250,360,200,360"></path>
<path class="link" d="M300,552C250,552,250,360,200,360"></path>
<path class="link" d="M300,600C250,600,250,360,200,360"></path>
<path class="link" d="M300,648C250,648,250,360,200,360"></path>
<path class="link" d="M300,696C250,696,250,360,200,360"></path>
</g>
</g>
</svg>
svgесть тегimage, который позволяет вам поместить изображение (которое отличается от тегаimghtml). См.: developer.mozilla.org/fr/docs/Web/SVG/ Элемент/изображение, а также такой пост: stackoverflow.com/questions/10859257/ . Надеюсь, поможет. - person Flo schedule 13.12.2019src, а должно бытьxlink:href. Как я уже сказал, тег svg<image>отличается от тега html<img>. - person Flo schedule 13.12.2019