d3 concept question, почему / когда мне нужно использовать url ()? - PullRequest
Новая
       14

d3 concept question, почему / когда мне нужно использовать url ()?

0 голосов
/ 10 апреля 2020

У меня есть вопрос о концепции и использовании команды url в аргументе attr в d3.

Я предполагаю, что причиной использования 'url' является приведение информации об атрибутах, уже созданной, во вновь определенный элемент. Является ли это фиксированным синтаксисом только для создания пути клипа в d3?

Я не видел никаких других случаев использования url для назначения атрибута элемента. В следующем URL ('# clip')

Приносит ли все после аргумента .attr ('id', 'clip')? 

  var clip = Svg.append("svg").append('clipPath')
      .attr("id", "clip")
      .append("rect")
      .attr("width", width )
      .attr("height", height )
      .attr("x", 0)
      .attr("y", 0);

  // Color scale: give me a specie name, I return a color
  var color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Add brushing
  var brush = d3.brushX()                 // Add the brush feature using the d3.brush function
      .extent( [ [0,0], [width,height] ] ) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
      .on("end", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function

  // Create the scatter variable: where both the circles and the brush take place
  var scatter = Svg.append('g')
    .attr("clip-path", "url('#clip')")

Если url предназначен для получения информации после аргумента 'id' или 'class', приведенный ниже код должен работать, но он не работает.

что именно делает url () точно? 

  var rects = svg.append('rect')
   .attr('id','recta')
  .attr('x',50)
  .attr('y',50)
  .attr('width',100)
  .attr('height',100)
  .style('fill','red')

  var rects2 = svg.append('rect',"url(''#recta')")
  console.log('a')

1 Ответ

0 голосов
/ 10 апреля 2020

This: 

var clip = Svg.append("svg").append('clipPath')
  .attr("id", "clip")
  .append("rect")
  .attr("width", 200)
  .attr("height", 200)
  .attr("x", 0)
  .attr("y", 0);
var scatter = Svg.append('g')
  .attr("clip-path", "url('#clip')")

Переводится на это: 

<svg>
   <clipPath id="clip">
      <rect width="200" height="200" x="0" y="0">
   </clipPath>
   <g clip-path="url('#clip')">
</svg>

Итак, это элемент g с атрибутом clip-path, определяемым содержимым #clip.

Теперь это: 

var rects = svg.append('rect')
  .attr('id','recta')
  .attr('x',50)
  .attr('y',50)
  .attr('width',100)
  .attr('height',100)
  .style('fill','red')
var rects2 = svg.append('rect', "url('#recta')")

Переводится в: 

<svg>
   <rect id="recta" x="50" y="50" width="100" height="100" style="fill: red">
   <rect>
</svg>

Параметр просто игнорируется.

Дополнительная информация о ссылках на URL https://www.w3.org/TR/SVG2/linking.html

...