Где этот код d3 выполнен?

Я просматривал следующий код из https://www.dashingd3js.com/svg-paths-and-d3js сегодня. Мне пришло в голову, что все d3-коды являются переменными операторами; ничто, кажется, не «вызывает» это и говорит «теперь используйте эти определения переменных, чтобы нарисовать объекты svg». Поэтому мой вопрос: где происходит этот вызов. Является ли вызов в коде d3.min.js? Или это что-то о том, как определяются инструкции var или что-то еще? Спасибо за вашу помощь в этом фундаментальном вопросе.Где этот код d3 выполнен?

Также да: я пытался выяснить причину для себя в течение часа или около того. После этого я бы никогда не публиковал это, если бы это было не последнее средство.

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="d3.min.js"></script> 
<script> 
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, 
       { "x": 40, "y": 10}, { "x": 60, "y": 40}, 
       { "x": 80, "y": 5}, { "x": 100, "y": 60}]; 

//This is the accessor function we talked about above 
var lineFunction = d3.svg.line() 
         .x(function(d) { return d.x; }) 
         .y(function(d) { return d.y; }) 
         .interpolate("linear"); 

//The SVG Container 
var svgContainer = d3.select("body").append("svg") 
            .attr("width", 200) 
            .attr("height", 200); 

//The line SVG Path we draw 
var lineGraph = svgContainer.append("path") 
          .attr("d", lineFunction(lineData)) 
          .attr("stroke", "blue") 
          .attr("stroke-width", 2) 
          .attr("fill", "none"); 

</script> 
</body> 
</html>

источник

2016-01-07 ouonomos

Ключ, который я думаю к тому, что вы хотите получить, - это метод «добавить».

Если взять эту частичную линию, например ...

var svgContainer = d3.select("body").append("svg")

d3 нашел элемент «тело», и теперь он создал новый «элемент SVG.

Вы увидите другую подобную линию ...

var lineGraph = svgContainer.append("path")

Теперь у нас есть «путь», добавил внутри SVG.

«LineFunction», созданный ранее, был функцией, которая в основном возвращает значения для координат пути (вы можете дать ей функцию, которая возвращает значение, а не только значение), что в значительной степени оно. Остальные - только атрибуты для соответствующих элементов.

источник

2016-01-07 16:32:47 Ian

спасибо. Объединяя приведенные выше ответы, я получаю следующее: (1) JS выполнит код на загрузке страницы, если нет других событий, которые связывают его выполнение с событиями (2) в этом коде, метод append заставляет элементы svg рисоваться , Один полезный эксперимент для меня заключался в том, чтобы уменьшить строку «Var lineGraph ...» до «svgContainer.append (« путь ») ..», и я обнаружил, что все еще выполнено. Это поведение оправдывало мои ожидания. Странно, что код, состоящий только из переменных defs, будет выполнен, чтобы что-то сделать, но со временем я подкорректирую свое понимание. – ouonomos

Почему это странно? Переменная def вызывает метод.Например, предположим, что мой код - var result = doLoadsOfStuffAndReturnCalculatedResult(); является относительно нормальным. Тем не менее, я думаю, что d3 включает в себя небольшой сдвиг в мышлении в целом, хотя, поэтому я думаю, что это хорошо для вас, чтобы поэкспериментировать с кодом, поскольку это помогает программированию в целом видеть несколько разные философии в коде. – Ian

Что находится в <script> теги выполнены.

var lineFunction = d3.svg.line()

означает вызов метода d3.svg.line и возвращать результаты lineFunction

источник

2016-01-07 13:21:17

Ну, Ваш вопрос о том, как работает Javascript. Как видно из названия, Javascript является языком сценариев.

В зависимости от того, что вы хотите, чтобы ваш код JavaScript выполнял и как вы его структурировали, он либо будет выполняться, как только файл загрузится, либо дождитесь запуска события (например, щелчок или загрузка).

В отличие от скомпилированных языков JS выполняет оператор кода посредством оператора.

Чтобы ответить на ваш вопрос. Поскольку в приведенном выше коде нет событий, браузер начинает выполнять ваш код в тот момент, когда он видит код.

var lineFunction = d3.svg.line() is a function and browser evaluates it when it encounter it.

Я попытался объяснить это очень простыми словами, если у вас есть еще вопросы, которые вы можете задать.

источник

2016-01-07 14:27:51 Fawzan

Где этот код d3 выполнен?

ответ

Смежные вопросы