score:1
the data object you use can be anything. the most appropriate pattern is to prepare it before you attach it to the elements selection, and in such a way that you have everything you need already on hand.
the following example defines a data structure mapping from types to the data that differ per category. this is only an example, the core is what happens in the .map()
function: you add one or more properties to your data object so that you have the connection between node.type
and the way you need to write your pattern just right for every node.
a similar way to connect from ids to the asset folder images will be needed.
it is a bit strange that you define a pattern for each node, but only draw a circle if node.depth !== 0
but that is for you to understand, use the filter function only to identify the non-toplevel entries that need a circle rendered.
const details = new map([
[engagementtype.product, { path: 'products', prefix: 'insightimage'} ],
[engagementtype.community, { path: 'comunities', prefix: 'insightimagecom'} ],
// and so on...
]);
// enhance your data, each node is a shallow copy with extra properties
const renderingdata = this.nodes.map(node => object.assign({
patternid: `${details.get(node.type).prefix}-${d.id}`,
imageurl: `https://tiktok.org/${details.get(node.type).path}/${d.id}/standard`,
isleaf: node.depth === 4 && !node.isextranode
}, node));
const circle = d3.selectall('circle.node')
.data(renderingdata)
.enter();
// now it is straight forward
circle
.append("pattern")
.attr("id", d => node.patternid)
.attr("patterncontentunits", "objectboundingbox")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", 0)
.attr("y", 0);
.append("image")
.attr("xlink:href", d => d.imageurl)
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.attr('preserveaspectratio', 'xmidymid slice')
// and now you filter for non-toplevel nodes
.filter(node => node.depth !== 0)
.append('circle')
.classed('engagement-graphnode', true)
.classed('engagement-graphnodebackground', true)
.classed('engagement-graphleaf', node => node.isleaf)
.style('fill', d => `url(#${d.patternid})`)
.style('opacity', node => (node.visible) ? 1 : 0)
.style('visibility', node => (node.visible) ? 'visible' : 'hidden')
.on('click', node => onclick(node));
Source: stackoverflow.com
Related Query
- Reduce code - duplicated code appending svg images
- D3 Appending Text to a SVG Rectangle
- Appending multiple svg text with d3
- How do I associate SVG elements generated by graphviz to elements in the DOT source code
- Converting d3.js SVG code to a standalone program -- any suggestions?
- Button to download inpage SVG code as an SVG file?
- Angular - Scaling an inline d3 SVG created in code
- SVG low performance with rotated images
- Appending complex SVG elements to a selection
- Appending element clone to svg group in d3js
- appending entire svg to dom element leads to Exception... "String contains an invalid character" code: "5"
- dc.js reduce space/padding inside svg element
- How to resizing svg images for a print preview only?
- Ignore missing images in SVG with D3 data and enter methods
- Appending SVG Elements in D3
- Appending svg into a background-image
- How to add multiple images to svg in D3 (quantity based on value in dataset)
- D3.js - Appending LinearIcons to SVG
- D3 - Appending SVG based on JSON Data
- Drawing SVG images with an array of images.
- How do I resize SVG images on a map as the zoom level changes?
- How to code svg layers so they appear in Inkscape layers drop down menu?
- D3 V3 Multi-line Chart - Issues appending lines to svg
- How to append multiple images in SVG using javascript?
- why does appending a foreignObject into an SVG break jquery ui's resize?
- Converting d3.js SVG code to a standalone program — Example?
- draw two circles using D3 and by appending SVG
- d3.js appending different SVG elements based on a data value
- Appending svg solved the issue
- Appending to an existing svg file with D3
More Query from same tag
- dc.js pieChart set specific x axis value
- Moving y-axis tick lines in d3 js
- d3.js 404 json file not found
- D3.js: Get pan translation without zoom without d3.drag
- D3 Bar Chart Graphical Representation Issue
- How can I add collision detection my d3js particle simulator
- D3 events - How to allow button click in d3 element?
- D3 Context menu with sub-menu
- grouping data in d3 pie chart
- Google maps with d3.js (v5) overlay
- how i get height of a svg element using d3js
- D3 listening to "end" event of a transition
- Compare two time objects in D3.js
- Can d3.js circle's radius be specified by a style attribute?
- d3 table append data according to different data types
- D3 remove parents of elements returned by exit
- spread out the the ticks on the axis
- getting rid of <canvas> to display polygons on top of image with .tif extension
- Nested JSON: property length of undefined
- How can I map html data to d3?
- how to add button table column using d3.js?
- D3.js - Error : d3.line() is not a function (changed from version 4 to 3)
- Dimple.js Candlestick Chart
- Implement panning while keeping nodes draggable in d3 force layout
- mouseover tooltip will not stay fixed in right corner
- for loop within d3.json
- d3.js gives NAN in path.line
- Vertical d3.svg.area?
- Passing a function to d3's .data()
- Is there a way to display the value together with the label on the legend in C3js pie chart?