I am currently in the process of integrating D3 with vue.js and I am following a straightforward guide available here:
The guide suggests appending a new div for each new bar, which I have successfully accomplished using a custom directive as shown in the attached code snippet.
My goal now is to leverage the capabilities of vue.js further by appending new components with props instead of just new div elements.
I am wondering how to achieve this - adding new components from a directive?
var app = new Vue({
el: '#app',
data: {
array: [4, 8, 15, 16, 23, 42]
},
directives: {
chart: {
bind(element, array) {
d3.select(element)
.selectAll('div')
.data(array.value)
.enter()
.append('div')
.style('width', barValue => {
return barValue * 10 + 'px'
})
.text(barValue => {
return barValue
})
}
}
}
})
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d6d5c5e0928e938e94">[email protected]</a>"></script>
<div id="app">
<div v-chart="array" class="chart">
</div>
</div>