Блог

Главная - Вопросы по программированию - D3 Добавление гиперссылок на объекты?

D3 Добавление гиперссылок на объекты?

#javascript #d3.js

Вопрос:

Я пытаюсь работать над диаграммой D3, и она будет представлять собой меню моего веб-сайта, я попытался добавить гиперссылки, следуя другим руководствам здесь, но ни одно из них не сработало, у каждого объекта будет другой URL-адрес, указывающий на: домашнюю страницу, информацию, контакты и т. Д. И смогу ли я перетащить объекты, если я добавлю гиперссылку? это означает, что если я буду удерживать нажатой кнопку, она будет перетаскиваться, если я один раз щелкну по объекту, он откроет URL-адрес

 var   w = 1000,
      h =  800,
      circleWidth = 5;


var palette = {
      "lightgray": "#05386B",
      "gray": "#FFFFFF",
      "mediumgray": "#FFFFFF",
      "blue": "#FFFFFF"
  }

var colors = d3.scale.ordinal() // D3 Version 4
.range(["#05386B", "#379683" , "#5CDB95"]);

var nodes = [
      { name: "Skills"},
      { name: "HTML5", target: [0], value: 58 },
      { name: "JavaScript", target: [0, 1], value: 65 },
      { name: "Scss", target: [0, 1, 2], value: 52 },
      { name: "JAVA", target: [0, 3], value: 48 },
      { name: "IOT", target: [0,3,4], value: 40 },
      { name: "", target: [0,3,4,5], value: 36 },
      { name: "jQuery", target: [0, 1, 2], value: 52 },
      { name: "RaspberryPi", target: [0, 1, 2, 8], value: 37 },
      { name: "", target: [0,1,2], value: 20 },
      { name: "Wordpress", target: [0,1,2,3,9], value: 67 },
      { name: "Git", target: [0,1,2,3,4,5,6,7,8,10], value: 68 },
      { name: "", target: [0,1,2,7,8 ], value: 16 },
      { name: "", target: [0,1,2,7,8], value: 25 },
      { name: "Linux", target: [0,1,2,3,4,5,6,7,8,9,10,11,12], value: 45 },
      { name: "", target: [0,1,2,7,8], value: 25 },
      { name: "Adobe Suite", target: [0,1,2,12], value: 57 },
      { name: "", target: [0,9,10], value: 20 },
      { name: "", target: [0,9,10], value: 37 },
];

var links = [];

for (var i = 0; i < nodes.length; i  ){
      if (nodes[i].target !== undefined) {
            for ( var x = 0; x < nodes[i].target.length; x   )
              links.push({
                  source: nodes[i],
                  target: nodes[nodes[i].target[x]]
              });
      };
};


var myChart = d3.select('body')
      .append("div")
        .classed("svg-container", true)

      .append('svg')
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 1000 800")
        .classed("svg-content-responsive", true)


var force = d3.layout.force()
      .nodes(nodes)
      .links([])
      .gravity(0.1)
      .charge(-1000)
      .size([w,h]);

      var link = myChart.selectAll('line')
            .data(links).enter().append('line')
            .attr('stroke', palette.lightgray)
            .attr('strokewidth', '1');

      var node =  myChart.selectAll('circle')
            .data(nodes).enter()
            .append('g')
            .call(force.drag);


     node.append('circle')
            .attr('cx', function(d){return d.x; })
            .attr('cy', function(d){return d.y; })
            .attr('r', function(d,i){
                  console.log(d.value);
                  if ( i > 0 ) {
                        return circleWidth   d.value;
                  } else {
                        return circleWidth   35;
                  }
            })
            .attr('fill', function(d,i){
                  if ( i > 0 ) {
                        return colors(i);
                  } else {
                        return '#fff';
                  }
            })
            .attr('strokewidth', function(d,i){
                  if ( i > 0 ) {
                        return '0';
                  } else {
                        return '2';
                  }
            })
            .attr('stroke', function(d,i){
                  if ( i > 0 ) {
                        return '';
                  } else {
                        return 'black';
                  }
            });


      force.on('tick', function(e){
            node.attr('transform', function(d, i){
              return 'translate('   d.x   ','  d.y   ')'
            })

          link
              .attr('x1', function(d){ return d.source.x; })
              .attr('y1', function(d){ return d.source.y; })
              .attr('x2', function(d){ return d.target.x; })
              .attr('y2', function(d){ return d.target.y; })
      });


      node.append('text')
            .text(function(d){ return d.name; })
            .attr('font-family', 'Raleway', 'Helvetica Neue, Helvetica')
            .attr('fill', function(d, i){
              console.log(d.value);
                  if ( i > 0 amp;amp; d.value < 10 ) {
                        return palette.mediumgray;
                  } else if ( i > 0 amp;amp; d.value >10 ) {
                        return palette.mediumgray;
                  } else {
                        return palette.blue;
                  }
            })
            .attr('text-anchor', function(d, i) {
                  return 'middle';
            })
            .attr('font-size', function(d, i){
                  if (i > 0) {
                        return '.8em';
                  } else {
                        return '.9em';
                  }
            })

force.start(); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

Ответ №1:

Вы можете добавить a элемент g , представляющий каждый узел:

 var node =  myChart.selectAll('circle')
    .data(nodes).enter()
    .append('g')
    .call(force.drag)
    .append("a")
    .attr("href",function(d) {
         // eg:
         return "myURL/" d.name
    });

Затем просто продолжайте добавлять текст и круги, к node которым теперь является родительским a элементом, который в этом случае в основном функционирует так же, как g (вы можете применить к нему преобразование, поэтому вам не нужно изменять функцию галочки).:

 var   w = 1000,
      h =  800,
      circleWidth = 5;


var palette = {
      "lightgray": "#05386B",
      "gray": "#FFFFFF",
      "mediumgray": "#FFFFFF",
      "blue": "#FFFFFF"
  }

var colors = d3.scale.ordinal() // D3 Version 4
.range(["#05386B", "#379683" , "#5CDB95"]);

var nodes = [
      { name: "Skills"},
      { name: "HTML5", target: [0], value: 58 },
      { name: "JavaScript", target: [0, 1], value: 65 },
      { name: "Scss", target: [0, 1, 2], value: 52 },
      { name: "JAVA", target: [0, 3], value: 48 },
      { name: "IOT", target: [0,3,4], value: 40 },
      { name: "", target: [0,3,4,5], value: 36 },
      { name: "jQuery", target: [0, 1, 2], value: 52 },
      { name: "RaspberryPi", target: [0, 1, 2, 8], value: 37 },
      { name: "", target: [0,1,2], value: 20 },
      { name: "Wordpress", target: [0,1,2,3,9], value: 67 },
      { name: "Git", target: [0,1,2,3,4,5,6,7,8,10], value: 68 },
      { name: "", target: [0,1,2,7,8 ], value: 16 },
      { name: "", target: [0,1,2,7,8], value: 25 },
      { name: "Linux", target: [0,1,2,3,4,5,6,7,8,9,10,11,12], value: 45 },
      { name: "", target: [0,1,2,7,8], value: 25 },
      { name: "Adobe Suite", target: [0,1,2,12], value: 57 },
      { name: "", target: [0,9,10], value: 20 },
      { name: "", target: [0,9,10], value: 37 },
];

var links = [];

for (var i = 0; i < nodes.length; i  ){
      if (nodes[i].target !== undefined) {
            for ( var x = 0; x < nodes[i].target.length; x   )
              links.push({
                  source: nodes[i],
                  target: nodes[nodes[i].target[x]]
              });
      };
};


var myChart = d3.select('body')
      .append("div")
        .classed("svg-container", true)

      .append('svg')
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 1000 800")
        .classed("svg-content-responsive", true)


var force = d3.layout.force()
      .nodes(nodes)
      .links([])
      .gravity(0.1)
      .charge(-1000)
      .size([w,h]);

      var link = myChart.selectAll('line')
            .data(links).enter().append('line')
            .attr('stroke', palette.lightgray)
            .attr('strokewidth', '1');

      var node =  myChart.selectAll('circle')
            .data(nodes).enter()
            .append('g')
            .call(force.drag)
            .append("a")
            .attr("href","https://google.com");


     node.append('circle')
            .attr('cx', function(d){return d.x; })
            .attr('cy', function(d){return d.y; })
            .attr('r', function(d,i){
               
                  if ( i > 0 ) {
                        return circleWidth   d.value;
                  } else {
                        return circleWidth   35;
                  }
            })
            .attr('fill', function(d,i){
                  if ( i > 0 ) {
                        return colors(i);
                  } else {
                        return '#fff';
                  }
            })
            .attr('strokewidth', function(d,i){
                  if ( i > 0 ) {
                        return '0';
                  } else {
                        return '2';
                  }
            })
            .attr('stroke', function(d,i){
                  if ( i > 0 ) {
                        return '';
                  } else {
                        return 'black';
                  }
            })


      force.on('tick', function(e){
            node.attr('transform', function(d, i){
              return 'translate('   d.x   ','  d.y   ')'
            })

          link
              .attr('x1', function(d){ return d.source.x; })
              .attr('y1', function(d){ return d.source.y; })
              .attr('x2', function(d){ return d.target.x; })
              .attr('y2', function(d){ return d.target.y; })
      });


      node.append('text')
            .text(function(d){ return d.name; })
            .attr('font-family', 'Raleway', 'Helvetica Neue, Helvetica')
            .attr('fill', function(d, i){
       
                  if ( i > 0 amp;amp; d.value < 10 ) {
                        return palette.mediumgray;
                  } else if ( i > 0 amp;amp; d.value >10 ) {
                        return palette.mediumgray;
                  } else {
                        return palette.blue;
                  }
            })
            .attr('text-anchor', function(d, i) {
                  return 'middle';
            })
            .attr('font-size', function(d, i){
                  if (i > 0) {
                        return '.8em';
                  } else {
                        return '.9em';
                  }
            })

force.start(); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

Достаточно короткое перетаскивание может вызвать щелчок и открыть ссылку — в d3v4 Я считаю, что у вас больше контроля над этой разделительной линией, хотя я не помню, как d3v3 отнесся к этому (в конце концов, мы сейчас до v7).

Вы могли бы даже вообще отказаться от g этого и a вместо этого ввести элементы, но я свел свое вмешательство к минимуму выше

Метки: