لا يتم عرض الروابط عند استخدام الخط الرائع في D3

Question

أقوم حاليًا بإنشاء تطبيق يرسم رسومًا بيانية لمستودعات github باستخدام مثال تخطيط D3 الخاص بـ Mike Bostock الموجود هنا: http://mbostock.github.io/d3/talk/20111018/tree.html

أحاول تقديم خط رائع بدلاً من دائرة svg وأعتقد أن هذا هو الكود الذي يعرض الدائرة:

nodeEnter.append("svg:circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

لقد وجدت ال سؤال مماثل وعندما حاولت استخدام هذا الرمز، نجح في عرض أيقونات الخط الرائعة، ولكن الآن أصبح النص القابل للربط، على الرغم من عرضه، مخفيًا لسبب ما:

لقد حاولت معالجة الكود ولكن لم أتمكن من معرفة كيفية الحصول على عقدة النص وربط النص لعرضه أيضًا.

لدي أيضًا شعور بأن هذا الرمز الآخر قد يتداخل مع ملحقاتي ويسبب هذا الخطأ.وهنا هو كاملا:

nodeEnter.append("svg:a")
  // make the links open in a new page
  .attr("target", "_blank")

  .attr("xlink:href", function(d) { 
    console.log('d.name -->', d.name);
    // d.data.path "" + d.name
    var url = "https://" + URLtoArr[0] + "/" + URLtoArr[1] + "/" + URLtoArr[2] + "/" + "tree/master" + "/";
    // if path is set (if it is NOT the root node), add it on to the end
    if(d.data !== undefined) {
      url += d.data.path; 
    }
    return url; 
    // https://github.com/AndyLampert/repository-file-tree-generator/blob/master/public/css/main.css
  })

  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .style("fill-opacity", 1e-6);

أخيرًا، إليك تطبيق العمل الحالي الخاص بي على Heroku:http://github-file-tree-generator.herokuapp.com/

شكرا لك مقدما!

Answer 1

تظهر أيقونات النص، كما يمكنك معرفة ذلك من DOM ومن تحديد النص، لكنها شفافة تمامًا تقريبًا.

.style("fill-opacity", 1e-6); == غير مرئي تقريبًا على الرغم من أنه ليس مخفيًا من الناحية الفنية

توصي بعض الأمثلة باستخدام عتامة تقارب الصفر لإنشاء محتوى قابل للنقر عليه ولكنه غير مرئي (على الرغم من أنه يجب عليك حقًا استخدام خاصية أحداث المؤشر لذلك).لا بد أنك نسختها عن طريق الصدفة.