apb/vue-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

svg with d3

Browse source
This commit is contained in:
Andy Bunce 2018-04-27 23:11:44 +01:00
parent fbe756ec05
commit 371755ec59
3 changed files with 53 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/vue-poc/features/svg2.vue
View file

@ -1,20 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="svg2"> <template id="svg2">
<v-container fluid> <v-container fluid>
<!-- UI controls that can are used to manipulate the display of the chart --> <h5 class="title">Svg.</h5>
<div ref="svgcanvas" class="canvas"></div>
todo <v-btn @click="view.reset()">Reset</v-btn>
</v-container> </v-container>
</template> </template>
<script>{ <script>{
data: function() { data: function() {
return { return {
canvasd3:null,
view:null,
url:"https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg"
}; };
},
methods:{
}, },
mounted: function() { mounted: function() {
alert("mounted"); this.canvasd3 = d3.select(this.$refs.svgcanvas);
/** RUN SCRIPT **/
var canvasWidth = 800;
var canvas = d3.demo.canvas().width(435).height(400);
this.view=canvas;
this.canvasd3.call(canvas);
function addItem(item) {
canvas.addItem(d3.select(item));
};
d3.xml(this.url,
function(error, xml) {
if (error) throw error;
addItem(xml.documentElement);
});
} }
} }

33
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2018-04-25T23:09:21.192+01:00 // generated 2018-04-27T23:10:49.032+01:00
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
Vue.component('qd-confirm',{template:` Vue.component('qd-confirm',{template:`
@ -4086,19 +4086,40 @@ const Svg=Vue.extend({template:`
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/svg2.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/svg2.vue
const Svg2=Vue.extend({template:` const Svg2=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<!-- UI controls that can are used to manipulate the display of the chart --> <h5 class="title">Svg.</h5>
<div ref="svgcanvas" class="canvas"></div>
todo <v-btn @click="view.reset()">Reset</v-btn>
</v-container> </v-container>
`, `,
data: function() { data: function() {
return { return {
canvasd3:null,
view:null,
url:"https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg"
}; };
},
methods:{
}, },
mounted: function() { mounted: function() {
alert("mounted"); this.canvasd3 = d3.select(this.$refs.svgcanvas);
/** RUN SCRIPT **/
var canvasWidth = 800;
var canvas = d3.demo.canvas().width(435).height(400);
this.view=canvas;
this.canvasd3.call(canvas);
function addItem(item) {
canvas.addItem(d3.select(item));
};
d3.xml(this.url,
function(error, xml) {
if (error) throw error;
addItem(xml.documentElement);
});
} }
} }

19
src/vue-poc/static/svg/d3-svg.js vendored
View file

@ -397,22 +397,3 @@ d3.demo.minimap = function() {
return minimap; return minimap;
}; };
/** RUN SCRIPT **/
var canvasWidth = 800;
var canvas = d3.demo.canvas().width(435).height(400);
d3.select("#canvasqPWKOg").call(canvas);
d3.select("#resetButtonqPWKOg").on("click", function() {
canvas.reset();
});
//d3.xml("https://upload.wikimedia.org/wikipedia/en/1/15/Logo_D3.svg",function(error, xml) {
d3.xml("https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg",function(error, xml) {
if (error) throw error;
addItem(xml.documentElement);
});
function addItem(item) {
canvas.addItem(d3.select(item));
}