Question

我正在一个HTML页面中绘制多个图形，我想在div部分添加第二个图形以获得更合适的图表。

这是我创建的one of the issues referring to it。

有人可以告诉我如何更改下面的代码以将其放入div部分吗？

HTML ：

 <svg width="1200" height="550"></svg>

的Javascript ：

var svg = d3.select("svg"),
    margin = {top: 70, right: 20, bottom: 50, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Answer 1

在文件class Paddle(object): def __init__(self, screen_size, XCenter, YCenter, height, width, color): self.screen_size = screen_size self.XCenter = XCenter self.YCenter = YCenter self.height = height self.width = width self.color = color #Create the paddle surface on the sides of the screen self.rect = pygame.Rect(0, self.YCenter - self.height//2, self.width, self.height) def draw(self, screen): pygame.draw.rect(screen, self.color, self.rect, 0) pygame.draw.rect(screen, BLACK, self.rect, 1) class PlayerPaddle(Paddle): def __init__(self, screen_size, XCenter, YCenter, height, width, color): super().__init__(screen_size, XCenter, YCenter, height, width, color) self.speed = 5 self.direction = 0 self.score = 0 self.image = pygame.image.load("naruto.png") self.imagerect = self.image.get_rect() def draw(self, screen): super().draw(screen) screen.blit(self.image, self.imagerect)中，您将svg附加到现有div，如下所示：

script.js

因此，在文件var svg = d3.select("#chart").append("svg")中执行相同操作。

将svg附加到现有的div中（同时也为svg元素提供了positiveChart.js中的高度和宽度属性）：

index.html

然后在var svg = d3.select("#chart1").append("svg").attr("width", 1200).attr("height", 550)中制作一个div index.html，可以通过d3选择它来追加你的第二个svg。

Forked plunkr

div部分中的d3图

1 个答案: