The Chrome browser displays the SVG chart arrowhead marker-mid three times instead of just once

I have successfully created a basic force chart using D3.js.

Within this chart, there are nodes connected by links with markers in the middle (using marker-mid).

The issue I am facing is that on Chrome, the marker gets rendered three times instead of once. However, it works fine on IE and FF.

Below, I am sharing only the code snippet for SVG as I believe this might be a path-related problem rather than an issue with D3.js. 

    <svg class="baseSVG" style="width: 100%; height: 90%;">
  <g class="chart_wrapper">
    <g class="links">
      <g class="link_wrapper">
        <path class="link hate" marker-mid="url(#arrow)" d="M 342.9891277180959 320.7671874251745 A 190.7182256881292 190.7182256881292 0 0 1 225.76595293193114 281.82896265692517 A 190.7182256881292 190.7182256881292 0 0 1 156.98831902253903 179.22732948826612"></path>
      </g>
    </g>
    <g id="person0" class="node person Adam" transform="translate(156.98831902253903,179.22732948826612)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Adam</text>
      </g>
    </g>
    <g id="person1" class="node person Eve" transform="translate(342.9891277180959,320.7671874251745)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Eve</text>
      </g>
    </g>
    <g id="person2" class="node person Kazik" transform="translate(179.355374155828,342.83615430106596)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Kazik</text>
      </g>
    </g>
    <g id="person3" class="node person Janina" transform="translate(320.66071665952427,157.09136472857676)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Janina</text>
      </g>
    </g>
  </g>
  <defs>
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
      <path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
      <path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
    </marker>
  </defs>
  <defs></defs>
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
      <path d="M0,-5L10,0L0,5"></path>
    </marker>
  </defs>
  <defs></defs>
</svg>

View Example on JSFiddle

javascriptd3.jssvg

Answer №1

If anyone needs a solution.

Shoutout to @theOneGuy and @echonax for being spot on. The fix involves switching from marker-mid to marker-start.

Instead of a single path definition displaying a line with marker-mid, now there are two paths converging on the graph to form a single line. The second path includes marker-start.

The reason for using marker-start on the second path is due to its necessity to appear on top in terms of z-index. 

 <svg class="baseSVG" style="width: 100%; height: 90%;">
  <g class="chart_wrapper">
    <g class="links">
      <g class="link_wrapper">
        <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path>
        <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path>
      </g>
      <g class="link_wrapper">
        <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path>
        <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path>
      </g>
      <g class="link_wrapper">
        <path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path>
        <path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path>
      </g>
    </g>
    <g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Adam</text>
      </g>
    </g>
    <g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Eve</text>
      </g>
    </g>
    <g id="person2" class="node person Kazik" transform="translate(289.2970047078608,367.65475135214126)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Kazik</text>
      </g>
    </g>
    <g id="person3" class="node person Janina" transform="translate(226.0636547128077,127.42597160431035)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Janina</text>
      </g>
    </g>
  </g>
  <defs>
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
      <path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
      <path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
    </marker>
  </defs>
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
      <path d="M0,-5L10,0L0,5"></path>
    </marker>
  </defs>
</svg>

Check out the latest updates on Js Fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Next.js - Exceeding Optimal Bundle Size by Approximately 3 Megabytes

Is there a way to decrease the size of my Next.JS bundle, specifically the Node Modules that are causing excessive loading time and slowing down browsing speed? Check out this analysis for more details: https://i.sstatic.net/3LQz4.jpg I'm happy to p ...

javascriptreactjswebpacknext.js

Creating custom transparency effects in Three JS using ShaderMaterial

When drawing two geometries next to each other and having them rotate, a common issue arises. The first drawn geometry obstructs the second one where transparency should be applied uniformly. Both objects should exhibit the same level of transparency regar ...

javascriptthree.jswebgltransparencyblending

The toggle feature is failing to execute upon clicking the button with the onclick handler in JavaScript

const toggleButton = document.getElementById('btn'); setInterval(displayTime,1000); toggleButton.onclick= function toggle() { if (toggleButton.innerHTML=="Light") { document.body.style.backgroundColor ="white"; ...

javascript

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

javascriptpythonhtmlselenium-webdriver

Ways to retrieve the offspring of a reference to Object.keys(myEl)

Looking at the snippet of code provided, I am able to access the text000 object but what I really need is to extract its child array for my intended payload. Once I have a reference to the key, how can I capture its children? Here is the complete object: ...

javascriptarraysjsonangular

Exploring the process of data binding within AngularJS's link function

Currently, I am working with a directive that looks like this: app.directive('updateinfo', function() { function link(scope, element, attrs) { function update(){ var str = '<input type="text" ng-model="scope.log1" /> ...

javascriptangularjs

Due to high activity on the main thread, a delay of xxx ms occurred in processing the 'wheel' input event

While using Chrome version: Version 55.0.2883.75 beta (64-bit), along with material-ui (https://github.com/callemall/material-ui) version 0.16.5, and react+react-dom version 15.4.1, an interesting warning message popped up as I scrolled down the page with ...

javascriptgoogle-chromereactjsbrowsermaterial-ui

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

Is there a solution to sharing data set in a socket in one namespace and accessing it on another namespace? While I understand that data can be attached to the socket object itself, a problem arises when trying to access the data in a different namespace. ...

javascriptnode.jssocket.io

Automatically choose options based on the value of the textbox ng-model when the page loads using Angular

Here is the design of my select element: <select onchange="getVideo()" id="region"> <option ng-repeat="items in region" ng-selected = "items.countryCode === selectedRegion" value="{{items.countryCode}}">{{items.countryItem}}</option> ...

javascriptjqueryhtmlangularjs

Using plain JavaScript (without JQuery) to specify the AJAX content type

I have been working on form submission using AJAX with plain JavaScript, without any external libraries. However, I encountered an issue where the PHP doesn't seem to parse the data correctly when I try to parse the form. After doing some research o ...

javascriptphpajaxhtmlcontent-type

I can't seem to figure out why I keep running into a 403 error and why my Delete API isn't functioning

Need Assistance as a Beginner Working on a MERN Project and struggling with making the Delete API function from the front-end. The Delete API works perfectly when tested through Postman, but fails to work from the front-end. Below is the code snippet of t ...

javascriptreactjsreact-reduxmern

Utilizing the datepicker options function within a different function

I'm working on a function that utilizes a promise to retrieve data from an asynchronous ajax call: $("#mySelect").on('change', function() { var mySelectValue = $('#mySelect').val(); var promise = getAvailableDates(mySe ...

javascriptjqueryajaxdatepickerpromise

What benefits does utilizing mapActions in vue js provide?

During my exploration of Vue.js, I have been utilizing mapState extensively in my code to update rendering whenever there are changes in the store layer. Lately, I discovered the existence of mapActions in vuex. However, upon consulting various examples, ...

javascriptjqueryvue.js

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

Is there a way to turn the code for each button on my website into a jQuery function that can be applied to any button? This is how the code currently appears: $(document).ready(function() { $("#linkXML").hover( function() { ...

javascriptjqueryhtmlcss

Tips for transferring JSON data from wicket to JavaScript

In my Java Script page, I have a function that calls Wicket Ajax: function callWicketPage() { wicketAjaxGet( urlCallback, function() {alert('success'); }, function() { alert(&apos ...

javascriptajaxwicket

The rowCallback and createdRow functions are not properly highlighting the row

After researching the Jquery Datatable site and various Stack Overflow posts, I attempted to use rowCallback in order to highlight rows based on a specific value. let SET1 = $("#SET1").DataTable({ "columns": columns, "rowCallback": function( row, ...

javascriptjquerydatatables

Modify JSON from using single quotes to double quotes using JavaScript

Received a JSON from the backend to the front end that uses single quotes throughout, causing issues with a Magento 2 widget. The JSON structure is as follows: { 'mood': 'happy', 'reason': 'why shouldn't I?'} T ...

javascriptjsonregex

Create a modal window that displays dynamic content and updates the URL accordingly

Is it possible to create a modal window that opens up different routing, similar to the functionality seen on this website: ...

javascriptphpangularjsroutesmodal-dialog

Error: The meteor package encountered a SyntaxError due to an unexpected reserved word 'export'

I've made some modifications to a meteor package by adding this line: export const myName = 'my-package' However, I'm encountering an error: export const myName = 'my-package' ^^^^^^ SyntaxError: Unexpected reserved word I ...

javascriptnode.jsmeteorecmascript-6

Mongo slices left blank

I'm currently working on an image upload feature using MongoDB, nodeJS, express, multer, jimp, and gridFS. Initially, I upload the image with multer, then resize it with jimp before uploading the jimp buffer to MongoDB. However, when I try to delete t ...

javascriptnode.jsdatabasemongodbexpress