Exploring the properties of a file directory

Question

Exploring the properties of a file directory

As I try to access the d attribute of a path that was generated using Javascript, the output of printing the path element appears as follows:

path class="coastline"  
 d="M641.2565741281438,207.45837080935186L640.7046722156485,207.0278378856494L640.6985715873882,207.1279196729914L640.8663103175278,207.53837609537672L640.8542041922302,207.73856415298116L641.04637606029"

... with a more extensive path. I have managed to retrieve the class attribute by utilizing the getAttribute method associated with class. Yet, my attempts to obtain the d attribute result in receiving null. Could there be something else required for me to do?

edit: This is how I am currently trying to acquire the d attribute (my main focus being on the coastline):

    var path = d3.geo.path().projection(globe.projection).pointRadius(7);
    var coastline = d3.select(".coastline");
    console.log(coastline[0][0]);
    console.log(coastline[0][0].getAttribute('class'));
    console.log(coastline[0][0].getAttribute('d'));

javascript d3.js svg

Answer 1

Answer №1

The d attribute of the SVGPathElement "is a string which contains a series of path descriptions."

You have the ability to retrieve and update this attribute using the getAttribute()/setAttribute() methods.
Once the browser interprets it, the Path Object will hold an SVGPathSegList generated from this string. This SVGPathSegList consists of various PathSegXTo objects.

To access this list and make changes to each Path Segment, you can utilize the pathSegList property of your path object, which is an ArrayLike Object. However, the original string can only be retrieved through the use of the getAttribute method.

var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute('class', 'coastline');
svg.appendChild(p);
// set the attribute
p.setAttribute('d', 'M50,25L60,105L65,65');

// move the third point on x axis after 1 second
setTimeout(function() {
  p.pathSegList[2].x += 50;

  var coastline = d3.select(".coastline");
  // get the attribute with DOM method
  snippet.log('from getAttribute : ' + coastline[0][0].getAttribute('d'));
  // obtain it using d3 method
  snippet.log('from d3.attr() : ' + coastline.attr('d'));
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<svg id="svg"></svg>

Answer 2

The d attribute of the SVGPathElement "is a string which contains a series of path descriptions."

You have the ability to retrieve and update this attribute using the getAttribute()/setAttribute() methods.
Once the browser interprets it, the Path Object will hold an SVGPathSegList generated from this string. This SVGPathSegList consists of various PathSegXTo objects.

To access this list and make changes to each Path Segment, you can utilize the pathSegList property of your path object, which is an ArrayLike Object. However, the original string can only be retrieved through the use of the getAttribute method.

var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute('class', 'coastline');
svg.appendChild(p);
// set the attribute
p.setAttribute('d', 'M50,25L60,105L65,65');

// move the third point on x axis after 1 second
setTimeout(function() {
  p.pathSegList[2].x += 50;

  var coastline = d3.select(".coastline");
  // get the attribute with DOM method
  snippet.log('from getAttribute : ' + coastline[0][0].getAttribute('d'));
  // obtain it using d3 method
  snippet.log('from d3.attr() : ' + coastline.attr('d'));
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<svg id="svg"></svg>

Answer 3

Answer №2

Apologies! I prefer to refrain from stating my opinion clearly, please refer directly to the code snippet below:

var p = document.getElementById('test');
// general attribute | property, bi-directional
console.log(p.id);// test
console.log(p.getAttribute('id'));// test

// custom attribute,  <p class='m-test' id='test' data='data'></p> and p.setAttribute('data', 'data'); one-way, only object.getAttribute() works
console.log(p.data);// undefined
console.log(p.getAttribute('data'))// data

// custom property; one-way ,only object.propery works
p.proData = 'property';

console.log(p.proData);// property
console.log(p.getAttribute('proData'));// null

<p class='m-test' id='test' data='data'>
  this is a prograph
<p/>

you can set the 'd' attribute by using setAttribute method, only by getAttribute() method you get value the 'd' attribute.

Answer 4

Apologies! I prefer to refrain from stating my opinion clearly, please refer directly to the code snippet below:

var p = document.getElementById('test');
// general attribute | property, bi-directional
console.log(p.id);// test
console.log(p.getAttribute('id'));// test

// custom attribute,  <p class='m-test' id='test' data='data'></p> and p.setAttribute('data', 'data'); one-way, only object.getAttribute() works
console.log(p.data);// undefined
console.log(p.getAttribute('data'))// data

// custom property; one-way ,only object.propery works
p.proData = 'property';

console.log(p.proData);// property
console.log(p.getAttribute('proData'));// null

<p class='m-test' id='test' data='data'>
  this is a prograph
<p/>

you can set the 'd' attribute by using setAttribute method, only by getAttribute() method you get value the 'd' attribute.

Exploring the properties of a file directory

Answer №1

Answer №2

Similar questions

Can you explain the purpose of the window.constructor and global.constructor functions in JavaScript?

Transitioning menus in Ionic 2

The session variable is not accessible in an AJAX function

Unusual behavior involving the selection of $stateParams

Encountering an issue with React and material-ui-pickers date-io Jalaali Utils: receiving a TypeError stating that utils.getDayText is not recognized as

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

useEffect runs endlessly

Retrieving external JSON data with JavaScript

Compare the current return value to the previous value in the success callback of an Ajax request

Is there an implicit transformation or action involved when the promise chain is resolved or rejected in $q?

Encountering Axios errors while executing API calls at a high frequency

Configure WebStorm so that node_modules is set as the library root, while simultaneously excluding it from indexing

What is the functionality of the keydown event?

How is it that when a function is called with just one parameter, it ends up receiving the entire element?

The callback function for ajax completion fails to execute

Preventing Context Menu from Appearing on Long Click in HTML5 Games

The submission of the form using AJAX is currently experiencing issues

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

The integration of single page applications and <form> elements is a powerful combination in web development

Methods for applying a style property to a div element with JavaScriptExecutor in Selenium utilizing C#