Salesforce Data Visualisation D3.js in LWC Component
- or -
Post a project like this£20(approx. $25)
- Posted:
- Proposals: 5
- Remote
- #3416858
- Expired
Description
Experience Level: Entry
Hello,
looking for a Salesforce LWC / D3.js expert to help me debug my code.
I have created a LWC component using D3.js library. The idea is to create a process flow based on records creation and values.
I am able to draw the arrow shapes based on records but can't figure out how to position these shapes properly on the LWC
here is a snippet of my js code on LWC
const simulation = d3
.forceSimulation()
.force(
'link',
d3.forceLink().id(d => {
return d.id;
})
.distance(function (d) {
return 151;
})
)
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 4, height / 4))
.force("collide", d3.forceCollide(71).iterations(10))
const node = svg
.selectAll('polygon')
.data(nodes)
.enter()
.append('g')
.attr('class', 'nodes');
node.append('polygon')
.attr('points', '299.356 220.442, 269.494 251.882, 133.218 252.192, 164.702 221.528, 133.218 188.692, 269.494 189.002')
.attr('fill', function(d) { return d.color; });
node.append("text")
.style("text-anchor", "middle")
.text(function(d) { return d.label; });
simulation.nodes(nodes).on('tick', ticked);
looking for a Salesforce LWC / D3.js expert to help me debug my code.
I have created a LWC component using D3.js library. The idea is to create a process flow based on records creation and values.
I am able to draw the arrow shapes based on records but can't figure out how to position these shapes properly on the LWC
here is a snippet of my js code on LWC
const simulation = d3
.forceSimulation()
.force(
'link',
d3.forceLink().id(d => {
return d.id;
})
.distance(function (d) {
return 151;
})
)
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 4, height / 4))
.force("collide", d3.forceCollide(71).iterations(10))
const node = svg
.selectAll('polygon')
.data(nodes)
.enter()
.append('g')
.attr('class', 'nodes');
node.append('polygon')
.attr('points', '299.356 220.442, 269.494 251.882, 133.218 252.192, 164.702 221.528, 133.218 188.692, 269.494 189.002')
.attr('fill', function(d) { return d.color; });
node.append("text")
.style("text-anchor", "middle")
.text(function(d) { return d.label; });
simulation.nodes(nodes).on('tick', ticked);
Hermann O.
100% (3)Projects Completed
4
Freelancers worked with
3
Projects awarded
33%
Last project
8 Apr 2021
France
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies