2
저는 Polymer (v1) 프로젝트에서 작업하고 있으며 사용자 정의 폴리머 요소 중 하나에는 D3 (v4) 차트가 있어야합니다. D3은 DOM에 추가 할 때 꽤 많이 작동하는 것 같습니다. 불행하게도, Polymer는 DOM 조작이 수행되는 방법에 대해 꽤 엄격한 것처럼 보입니다.폴리머 요소의 그림자 DOM에 D3.js 요소 추가
내가 구현하고자하는 D3 차트의 매우 간단한 버전을 만들었습니다 : 나는 다음과 같은 파일이 개 솔루션을 시도
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.bar {
fill: #0198E1;
}
</style>
</head>
<body>
<svg></svg>
<script>
var data = [100, 120, 130, 110, 150, 90];
const CHART_WIDTH = 126;
const CHART_HEIGHT = 160;
svg = d3.select('svg')
.attr("width", CHART_WIDTH)
.attr("height", CHART_HEIGHT);
svg.selectAll('rect')
.data(data).enter().append('rect')
.attr("x", function(d, i) {return i * 21})
.attr("y", function(d) {return CHART_HEIGHT - d})
.attr("height", function(d) {return d})
.attr("width", 20)
.attr("class", "bar");
</script>
</body>
</html>
index.html을합니다.
index.html을
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="./d3-chart.html">
</head>
<body>
<d3-chart></d3-chart>
</body>
</html>
D3-lib.html
D3 및 중합체의 조합 용액 1사용 시도
<script src="https://d3js.org/d3.v4.min.js"></script>
대상 svg 요소를 선택한 다음 d3 추가를 수행하십시오.
D3-chart.html는
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="./d3-lib.html">
<dom-module id="d3-chart">
<template>
<style>
.bar {
fill: #0198E1;
}
</style>
<svg id="svg"></svg>
</template>
<script>
Polymer({
is: 'd3-chart',
properties: {
data: {
Type: Array,
value: [100, 120, 130, 110, 150, 90]
}
},
ready: function() {
const CHART_WIDTH = 126;
const CHART_HEIGHT = 160;
var svg = d3.select(this.$.svg)
.attr("width", CHART_WIDTH)
.attr("height", CHART_HEIGHT);
svg.selectAll('rect')
.data(this.data).enter().append('rect')
.attr("x", function(d, i) {return i * 21})
.attr("y", function(d) {return CHART_HEIGHT - d})
.attr("height", function(d) {return d})
.attr("width", 20)
.attr("class", "bar");
}
});
</script>
</dom-module>
이 성공적으로 차트를 표시하지만, CSS 스타일이 적용되지 않습니다. Polymer는 추가 된 새로운 요소에 대해 '알지 못하기'때문이라고 가정합니다. (가 아닌 DOM에서) 새로운 SVG 요소를 선택 D3는 요소를 추가 수행하고, DOM에 추가 할 폴리머를 사용하는
사용 D3 해결이 시도
.
D3-chart.html이 코드는 성공적으로 DOM에 모든 요소를 추가하지만, 아무것도 표시되지 않습니다
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="./d3-lib.html">
<dom-module id="d3-chart">
<template>
<style>
.bar {
fill: #0198E1;
}
</style>
</template>
<script>
Polymer({
is: 'd3-chart',
properties: {
data: {
Type: Array,
value: [100, 120, 130, 110, 150, 90]
}
},
ready: function() {
const CHART_WIDTH = 126;
const CHART_HEIGHT = 160;
var newSvgElement = document.createElement("svg");
var svg = d3.select(newSvgElement)
.attr("width", CHART_WIDTH)
.attr("height", CHART_HEIGHT);
svg.selectAll('rect')
.data(this.data).enter().append('rect')
.attr("x", function(d, i) {return i * 21})
.attr("y", function(d) {return CHART_HEIGHT - d})
.attr("height", function(d) {return d})
.attr("width", 20)
.attr("class", "bar");
Polymer.dom(this.root).appendChild(newSvgElement);
}
});
</script>
</dom-module>
.
D3과 Polymer를 통합하는 적절한 방법은 무엇입니까?