emiliorizzo/vue-d3-network

The data in vue instance is setted as string on html binding declaration

adgonzalez021091 opened this issue · 7 comments

adgonzalez021091 commented

Hi... I'm trying to generate the graph by including vue as script in html, but the html is not rendering the components of nodes and links as html components, but it is generating the array of nodes as a string inside the binding declaration... something like this.

This is my html
<d3-network v-bind:net-nodes="nodes" v-bind:net-links="links" v-bind:options="options"></d3-network>

This is how it is rendered
<d3-network net-nodes="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" net-links="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" options="[object Object]"></d3-network>

emiliorizzo commented

Hi @adgonzalez021091
Please provide a full example, including the component registration.

adgonzalez021091 commented

This is my html file

{% load static %}
{% load versioned_static %}

<html>
<head>
</head>

<body>
    <div id="app" width="1440" height="743">
        <d3-network  v-bind:net-nodes="nodes" v-bind:net-links="links" v-bind:options="options">
        </d3-network>
        
    </div>   
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>     
    <style src="vue-d3-network/dist/vue-d3-network.css"></style>
    <script src="{% versioned_static 'js/render_data.js'%}"></script>
</body>

</html>

This is my js file "render_data.js"

var D3Network = window['vue-d3-network']
var grp = new Vue({
	el: '#app',
	delimiters: ['{{', '}}'],
	components: {
		D3Network
	},
	data(){
		return {
			nodes:[
			{ id: 1, name: 'my node 1' },
			{ id: 2, name: 'my node 2' },
			{ id: 3, _color:'orange' },
			{ id: 4 },
			{ id: 5 },
			{ id: 6 },
			{ id: 7 },
			{ id: 8 },
			{ id: 9 }
			],
			links: [
			{ sid: 1, tid: 2, _color:'red' },
			{ sid: 2, tid: 8, _color:'f0f' },
			{ sid: 3, tid: 4,_color:'rebeccapurple' },
			{ sid: 4, tid: 5 },
			{ sid: 5, tid: 6 },
			{ sid: 7, tid: 8 },
			{ sid: 5, tid: 8 },
			{ sid: 3, tid: 8 },
			{ sid: 7, tid: 9 }
			],
			options:
			{
				force: 3000,
				nodeSize: 20,
				nodeLabels: true,
				linkWidth:5
			}
		}
	}
})

and i installed in my server the library by executing this command
npm install vue-d3-network --save

emiliorizzo commented

@adgonzalez021091 please look at the browser console.
Is the library imported?

adgonzalez021091 commented

Captura de Pantalla 2020-06-08 a la(s) 12 00 41 p  m

Apparently not... Am i skipping some step?

emiliorizzo commented

This doesn't seem like a vue-d3-network issue.
Please review this example: https://jsfiddle.net/emii/ru24unsz/
and fix the library path in your html

adgonzalez021091 commented

Is true... thanks! Really nice work on this library!!