使用 d3.js 在 SVG 中放置 canvas（chart.js 折线图）

Question

我第一次尝试用 a 这样做，效果很好。

<button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button>

然而，当我尝试对 canvas 对象执行相同操作时，在这种情况下，由 chart.js 库生成的折线图不起作用。我正在使用 d3.js 将图表插入到 svg 中。我还在我的 angularjs chart.js 指令中放置了一个断点（我通过指令使用 chart.js），我注意到根本没有调用该指令。

chart.js canvas 的 foreignObject 正在插入 html，只是没有渲染。

<foreignObject x="5" y="5">
  <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick"></canvas>
</foreignObject>

有没有其他人遇到过类似的问题？

Answer 1

查看生成的HTML

您需要在 foreignObject 上设置高度和宽度

  d3.select("svg")
     .append("foreignObject")
         .attr("width", 480)
         .attr("height", 500)

并将 canvas 附加到 foreignObject

下的正文元素

  ...
  .append("xhtml:body")
      .html('<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true"></canvas>');

这是一个工作片段（检查 Chrome）

var app = angular.module("app", ["chart.js"]);
app.controller("chartController", ['$scope',
  function($scope) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
  }
])

d3.select("svg")
  .append("foreignObject")
  .attr("width", 480)
  .attr("height", 500)
  .append("xhtml:body")
  .html('<canvas id="line" class="chart chart-line" data="data" labels="labels"></canvas>');

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<link href="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" rel="stylesheet" />
<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>

<div ng-app="app">
  <div ng-controller="chartController">
    <svg width="960" height="500"></svg>
  </div>
</div>

使用 d3.js 在 SVG 中放置 canvas（chart.js 折线图）

Placing canvas (chart.js line chart) inside an SVG using d3.js

javascript

svg

d3.js

angularjs

chart.js