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

Customizing the styling of buttons in Highcharts is disabled when in full screen mode

How can I accommodate pushState routes from Backbone.js on a node.js express server?

Unable to pass a variable through ajax to another PHP file

Locate and modify a specific element within an array of objects

What is the process for displaying the attributes of a custom object in Typescript?

Connect two radio buttons across separate forms

A div containing a form, with the form being visually integrated within the div

How can I deliver assets in React without the PUBLIC_URL showing up in the path?

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Tips for transferring information to an input field's value

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

Can a new frame be created below an already existing frame in HTML?

Tips on handling a Vue computed property

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Spontaneous visual paired with text upon refreshing

Utilize setState in a ReactJS function within an if statement towards the end

Calendars malfunctioning following the execution of npm run build

The React snackbar is mysteriously peeking out from behind the popup

Unlocking the Power of Global Props in AlpineJS: A Step-by-Step Guide