element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 5 + d.importance/7 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.importance/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + "\n" + d.label + " \n\n- " + d.group); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.id); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); //legend_g.append("circle") // .attr("cx", 0) // .attr("cy", 0) // .attr("r", 5) //.attr("fill", colorScale); //legend_g.append("text") // .attr("x", 10) // .attr("y", 5) // .text(d => d); return div }</article></body></html>

myChart={ const div = html`

`; const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id",'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX',23) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY',0) .attr('orient','auto') .attr('markerWidth',13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); //create some data const dataset = { nodes: [ //Classes {id: 'plt:HeatPump', label: 'Heat Pump', 'group': 'Platoon', importance: 40} , {id: 'plt:VentilationSystem', label: 'Ventilation System ', 'group': 'Platoon', importance: 40} , {id: 'plt:CoolingSystem', label: 'Cooling System ', 'group': 'Platoon', importance: 40} , {id: 'plt:HeatingCoil', label: 'Heating Coil', 'group': 'Platoon', importance: 40} , {id: 'plt:Evaporator', label: 'Evaporator', 'group': 'Platoon', importance: 40} , {id: 'plt:WaterSystem', label: 'Water System ', 'group': 'Platoon', importance: 40} , {id: 'plt:GasHeatPump', label: 'Gas Heat Pump', 'group': 'Platoon', importance: 40} , {id: 'plt:Condenser', label: 'Condenser', 'group': 'Platoon', importance: 40} , {id: 'plt:PressureDropProperty', label: 'Pressure Drop Property', 'group': 'Platoon', importance: 40} , {id: 'plt:Fancoil', label: 'Fancoil', 'group': 'Platoon', importance: 40} , {id: 'plt:GasBoiler', label: 'Gas Boiler', 'group': 'Platoon', importance: 40} , {id: 'plt:Burner', label: 'Burner', 'group': 'Platoon', importance: 40} , {id: 'plt:HeatingValve', label: 'Heating Valve ', 'group': 'Platoon', importance: 40} , {id: 'plt:HybridHeatPump', label: 'Hybrid Heat Pump', 'group': 'Platoon', importance: 40} , {id: 'plt:AirHandlerUnit', label: 'Air Handler Unit', 'group': 'Platoon', importance: 40} , {id: 'plt:ReturnFan', label: 'Return Fan', 'group': 'Platoon', importance: 40} , {id: 'plt:HotWaterSystem', label: 'Hot Water System ', 'group': 'Platoon', importance: 40} , {id: 'plt:VariableRefrigerantVolume', label: 'Variable Refrigerant Volume', 'group': 'Platoon', importance: 40} , {id: 'plt:HeatRecoveryChiller', label: 'Heat Recovery Chiller', 'group': 'Platoon', importance: 40} , {id: 'plt:ChillerEvaporator', label: 'Evaporator Chiller', 'group': 'Platoon', importance: 40} , {id: 'plt:SupplyFan', label: 'Supply Fan', 'group': 'Platoon', importance: 40} , {id: 'plt:Pump', label: 'Pump', 'group': 'Platoon', importance: 40} , {id: 'plt:Controller', label: 'Controller', 'group': 'Platoon', importance: 40} , {id: 'plt:HeatingSystem', label: 'Heating System ', 'group': 'Platoon', importance: 40} , {id: 'plt:ElectricHeatPump', label: 'Electric Heat Pump', 'group': 'Platoon', importance: 40} , {id: 'plt:Boiler', label: 'Boiler', 'group': 'Platoon', importance: 40} , {id: 'plt:ColdWaterSystem', label: 'Cold Water System ', 'group': 'Platoon', importance: 40} , {id: 'plt:Fan', label: 'Fan', 'group': 'Platoon', importance: 40} , {id: 'plt:Chiller', label: 'Chiller', 'group': 'Platoon', importance: 40} , {id: 'plt:CoolingCoil', label: 'Cooling Coil', 'group': 'Platoon', importance: 40} , {id: 'plt:HVACValveController', label: 'HVAC Valve Controller ', 'group': 'Platoon', importance: 40} , {id: 'plt:CoolingValve', label: 'Cooling Valve ', 'group': 'Platoon', importance: 40} , {id: 'plt:GasSystem', label: 'Gas System', 'group': 'Platoon', importance: 40} , {id: 'plt:Steamer', label: 'Steamer', 'group': 'Platoon', importance: 40} , {id: 'plt:ElectricBoiler', label: 'Electric Boiler', 'group': 'Platoon', importance: 40} , {id: 'plt:PressureDropEvaluation', label: 'Pressure Drop Evaluation', 'group': 'Platoon', importance: 40} , {id: 'plt:HVAC', label: 'Heating Ventilation and Air Conditioning', 'group': 'Platoon', importance: 40} , {id: 'plt:DomesticHotWaterSystem', label: 'Domestic Hot Water System ', 'group': 'Platoon', importance: 40} , {id: 'plt:Compressor', label: 'Compressor', 'group': 'Platoon', importance: 40} , {id: 'plt:BuildingManagementSystem', label: 'Building Management System', 'group': 'Platoon', importance: 40} , {id: 'https://brickschema.org/schema/1.1/Brick#Fan', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Chiller', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:ner', label: 'None', 'group': '----', importance: 20} , {id: 'plt:HVACModeState', label: 'None', 'group': 'Platoon', importance: 40} , {id: 'saref:#OnState', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Valve', label: 'None', 'group': '----', importance: 20} , {id: 'http://purl.org/vocommons/voaf#Vocabulary', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Coil', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Boiler', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Evaporator', label: 'None', 'group': '----', importance: 20} , {id: 'saref:#State', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Condenser', label: 'None', 'group': '----', importance: 20} , {id: 'https://brickschema.org/schema/1.1/Brick#SupplyAir', label: 'None', 'group': '----', importance: 20} , {id: 'saref:#Sensor', label: 'None', 'group': '----', importance: 20} , {id: 'saref:#HVAC', label: 'None', 'group': '----', importance: 20} , {id: 'https://brickschema.org/schema/1.1/Brick#ReturnAir', label: 'None', 'group': '----', importance: 20} , {id: 'saref:#OffState', label: 'None', 'group': '----', importance: 20} , {id: 'saref4bldg:Pump', label: 'None', 'group': '----', importance: 20} , {id: 'seas:System', label: 'None', 'group': '----', importance: 20} , {id: 'seas:ElectricPowerSystem', label: 'None', 'group': '----', importance: 20} , {id: 'seas:Property', label: 'None', 'group': '----', importance: 20} , {id: 'seas:Evaluation', label: 'None', 'group': '----', importance: 20} , {id: 'foaf:Person', label: 'None', 'group': '----', importance: 20} ], links: [ //subClassOf {source: 'plt:HeatPump', target: 'plt:Pump', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:VentilationSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:CoolingSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HeatingCoil', target: 'saref4bldg:Coil', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Evaporator', target: 'seas:ElectricPowerSystem', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:WaterSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:GasHeatPump', target: 'plt:HeatPump', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Condenser', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:PressureDropProperty', target: 'seas:Property', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Fancoil', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:GasBoiler', target: 'plt:Boiler', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Burner', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HeatingValve', target: 'saref4bldg:Valve', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HybridHeatPump', target: 'plt:HeatPump', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:AirHandlerUnit', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:ReturnFan', target: 'plt:Fan', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HotWaterSystem', target: 'plt:WaterSystem', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:VariableRefrigerantVolume', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HeatRecoveryChiller', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:ChillerEvaporator', target: 'plt:Evaporator', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:SupplyFan', target: 'plt:Fan', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Pump', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Controller', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HeatingSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:ElectricHeatPump', target: 'plt:HeatPump', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Boiler', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:ColdWaterSystem', target: 'plt:WaterSystem', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Fan', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Chiller', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:CoolingCoil', target: 'saref4bldg:Coil', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HVACValveController', target: 'plt:Controller', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:CoolingValve', target: 'saref4bldg:Valve', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:GasSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Steamer', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:ElectricBoiler', target: 'plt:Boiler', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:PressureDropEvaluation', target: 'seas:Evaluation', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:HVAC', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:DomesticHotWaterSystem', target: 'plt:HotWaterSystem', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:Compressor', target: 'plt:GasSystem', type: '--- rdfs:subClassOf --->>'} , {source: 'plt:BuildingManagementSystem', target: 'seas:System', type: '--- rdfs:subClassOf --->>'} ] }; // Initialize the links const link = svg.selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr('marker-end','url(#arrowhead)') //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 5 + d.importance/7 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.importance/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + "\n" + d.label + " \n\n- " + d.group); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.id); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); //legend_g.append("circle") // .attr("cx", 0) // .attr("cy", 0) // .attr("r", 5) //.attr("fill", colorScale); //legend_g.append("text") // .attr("x", 10) // .attr("y", 5) // .text(d => d); return div }</article></body></html>