如何使用d3.js将svg附加到已存在的svg? [英] How to append an svg to an prexisting svg using d3.js?

问题描述

是否可以使用d3.js将另一个svg附加到先前存在的svg父级?

is it possible to append another svg to a preexisting svg parent using d3.js?

我知道可以通过使用'svg:image'属性来实现. 但是不幸的是，那时我失去了对内部svg-child的完全控制.

I know that its possible by using an 'svg:image'-attribute. But unfortunately then i am loosing full control about the inner svg-child.

有关dom节点是由d3创建的，但未呈现，因此页面保持空白.

希望有人可以帮助您，提前致谢:)

Hope somebody can help, thx in advance :)

这就是我得到的:

HTML CSS

  #svg-main-wrapper {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  
  
  <div id="svg-main-wrapper">
    <div svg-container svg-src="svgContainer[0].url" position="svgContainer[0].position">
    </div>    
  </div>

JavaScript

angular.module('app', ['ui.bootstrap'])
  .directive('svgContainer', function() {
    return {
      restrict: 'A',
      template: function() {
        var parent = angular.element('body');
        return '<svg class="svg-container" width="' + parent.width() + '" height="' + parent.height() + '" viewBox=" 0 0 ' + parent.width() + ' ' + parent.height() + '"preserveAspectRatio ="xMinYMax meet"></svg>';
      },
      scope: {
        svgSrc: '=',
        position: '='
      },
      link: function(scope, element, attrs) {

        var parent = angular.element('#svg-main-wrapper');

        var x = 0;
        var y = parent.height() - 400;

        var svg = d3.select(element[0]);
        var g = svg.append('g');

        var innersvg = g.append('svg')
          .attr('xlink:href', scope.svgSrc)
          .attr('preserveAspectRatio', scope.position)
          .attr('width', parent.width())
          .attr('height', 400)
          .attr('transform', 'translate(' + x + ',' + y + ')');

      },
      replace: true
    };
  })

  .controller('ctrl', ['$scope', '$window', function($scope, $window) {

    $scope.svgContainer = [
      {
        id: 0,
        short_name: 'left',
        url: './images/complete.svg',
        position: 'none'
      }
      ];
  }]);

推荐答案

您的问题是:是否有可能使用D3将SVG附加到SVG?" 那个对象有点误导(但是，如果您实际上是在谈论 <object> 或什至加载外部SVG，您都做错了，下面的解释将毫无用处，在这种情况下，回答

Your question is: "is it possible to append an SVG to an SVG using D3?" That object in the title is a bit misleading (However, if you're really talking about an <object> or even loading an external SVG, you're doing it wrong, and the following explanation would be useless. In that case, answers like this one will be more useful).

答案是肯定的.无论出于什么原因，您都想嵌套这些SVG(您可能不需要)，只需像使用其他任何元素一样使用append方法即可.

The answer is yes. For whatever reason you want to nest those SVGs (you probably don't need it), just use the append method as you would with any other element.

这是一个演示，请看一下控制台:SVG内有一个SVG.

Here is a demo, have a look at the console: there is an SVG inside an SVG.

var svg = d3.select("body").append("svg");
svg.append("text")
  .attr("y", 20)
  .text("this text is in the outer SVG");
var innerSVG = svg.append("svg");
innerSVG.append("text")
  .attr("y", 50)
  .text("this text is in the inner SVG");

var mySVG = (new XMLSerializer()).serializeToString(svg.node());
console.log(mySVG)

<script src="https://d3js.org/d3.v4.min.js"></script>

这篇关于如何使用d3.js将svg附加到已存在的svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！