Несколько версий script на той же странице (d3.js)

Ответ 1

Если вы посмотрите на основной исходный файл d3: https://github.com/mbostock/d3/blob/master/d3.js

вы видите, что он начинается:

d3 = function() {
  var d3 = {
    version: "3.1.5"
  };
  //.....

Итак, d3 - это просто объект. Я не уверен, что это лучший метод, но я думаю, что следующее будет работать:

• включить одну версию d3
• введите строку: d3versionX = d3;
• включить следующую версию
• то же, что и 2 с другим номером версии.
• put d3 = d3versionX, где X - это ваша версия по умолчанию для визуализации, когда страница загружается
• поместите обработчик событий на миниатюры, которые инициируют переключение версии, и установите для переменной d3 соответствующий номер версии в первую очередь.

обновление с образцом кода

См. этот jsbin для рабочего примера. Соответствующий код:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
  <script>
    d3version4 = d3
    window.d3 = null
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script>
    d3version3 = d3
    window.d3 = null
    // test it worked
    console.log('v3', d3version3.version)
    console.log('v4', d3version4.version)
  </script>

Ответ 2

Вам необходимо использовать этот общий принцип

var x = {
    version: 1,
    alert1: function() {
        alert("1hi1");
    },
    alert2: function() {
        alert("1hi2");
    }
};

var y = x;

var x = {
    version: 2,
    alert1: function() {
        alert("2hi1");
    },
    alert2: function() {
        alert("2hi2");
    }
};

y.alert1();
x.alert1();

on jsfiddle

jquery предлагает свой метод noconflict, и многие библиотеки предлагают одинаковый (не обязательно по имени) метод. Но вы можете сделать это сами, указав мой пример, в зависимости от сложности загружаемого script.

Вот как можно ввести две разные версии и использовать вышеприведенный принцип, чтобы назначить их различным переменным.

<div id="version1"></div>
<div id="version2"></div>

var script1 = document.createElement("script"),
    script2 = document.createElement("script"),
    oldD3;

function noConflict() {
    oldD3 = d3;
    console.log("loaded old");
    script2.type = 'text/javascript';
    script2.src = "http://d3js.org/d3.v3.min.js";
    script2.addEventListener("load", ready, false);
    document.head.appendChild(script2);
}

function ready() {
    console.log("loaded new");
    console.log(d3, oldD3);
    document.getElementById("version1").textContent = oldD3.version;
    document.getElementById("version2").textContent = d3.version;
}

script1.type = 'text/javascript';
script1.src = "http://d3js.org/d3.v2.min.js";
script1.addEventListener("load", noConflict, false);
document.head.appendChild(script1);

on jsfiddle

Ответ 3

Из версии d3 d3.v4 заголовок script выглядит несколько иначе. Вы можете изменить идентификатор global.d3 на global.d3v4, чтобы он выглядел как

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (factory((global.d3v4 = global.d3v4 || {})));
}(this, (function (exports) { 'use strict';

var version = "4.8.0";
...

Теперь вы можете вызывать функции d3 на d3v4.

Ответ 4

У меня была аналогичная проблема, вроде вашей, для некоторой визуализации нужен d3 v3, а другим нужен v4. Так я и добился этого.

• Включен d3 v3 в index.html(так как большая часть моих визуализаций была на v3)
• Включить require.js script в index.html//вы можете использовать путь cdn
• Перейдите на JavaScript, для которого требуется v4.

• напишите следующий код вверху.

  function graphicviz(id) {   
      require.config({
          paths: {
              d3: "https://d3js.org/d3.v4.min"
          }
      });
  
      require(["d3"], function(d3) {
          //... D3 Code Here...
      });
  }
  
  //Call The Function
  graphicviz(id);