Question

下午好。此脚本加载文件并将其表示为此d3代码。因此，当我添加attr时，我需要更改标记，我想添加一个直截了当的箭头。任何人都可以建议我。

<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Cluster comparison, partition agreement, microbial typing, typing         methods" />
<meta name="author" content="Rui Oliveira" />
<!-- <link rel="stylesheet" type="text/css" href="default.css" media="screen" /> -->
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <title>Adjusted Rand diagram</title>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>

<style type="text/css">


h2{
background: #EBF0F3;
font: normal 1.2em Tahoma, sans-serif;
padding: 10px;
margin:0 0 10px 0;
color: #114054;
}

p {
text-align:center; 
padding-top:40px;
font: normal 0.9em Tahoma, sans-serif;
  }


    path.link {
   fill: none;
    stroke: #666;
      stroke-width: 1.5px;
    }

marker {
ill: #666;
}

marker#strong {
 fill: black; 
}


path.link.strong {
stroke: black;
stroke-width: 2px;
}

path.link.weak {
stroke-dasharray: 0,2 1;
}

   circle {
   fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
  }

  text {
  font: 14px sans-serif;
pointer-events: none;
   }

    text.shadow {
    stroke: #fff; 
    style="text-align:center; display"
   stroke-width: 3px;
  stroke-opacity: .8;
    }

line {
 stroke-opacity: 10; 
}

</style>

调整后的兰德

警告：

Internet Explorer不允许您可视化此图表。请使用支持svg的浏览器。我们建议您使用Firefox或Google Chrome替代。

   <script type="text/javascript">

    // http://blog.thomsonreuters.com/index.php/mobile-patent-mediums-graphic-of-the-day/


  var links = [<?php
  $b='karateP1000T005.npf';
 if(file_exists($b))
  $a = fopen($b, "r");
  else{
  echo "]
  alert('Invalid file!');</script></body></html>";
  exit(0);
  }
  $nodes=$links=array();

while (!feof($a) ) {

$l = urlencode(fgets($a));
$l=explode('%09',$l);
  if(count($l)==2)
      $nodes[]=$l;
  else if(count($l)==3){
      $links[]=$l;
      echo '{source: "',(int) $l['0'],'", target: "',(int) $l['1'],'", type: "medium", value: "',  (int) $l['2'],'"},';
      }

  }

  fclose($a);

   ?>

    ];

     var nodes = {};

      //Compute the distinct nodes from the links.
       links.forEach(function(link) {
       link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
       link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
         });

       var w = window.innerWidth, //1100 
       h = window.innerHeight;   //1690

       var force = d3.layout.force()
       .nodes(d3.values(nodes))
       .links(links)

     //defines where to center the graph
    .size([w, h])
    .linkDistance(150)
    .charge(-1000)
  .on("tick", tick)
  .start();

  var svg = d3.select("body").append("svg:svg")
  // defines the canvas size
   .attr("width", w)
     .attr("height", h);

  svg.append("svg:line").
  attr("x1", 10).
  attr("y1", 10 ).
  attr("x2", 60 ).
  attr("y2", 10).
  attr("stroke", "black").
  attr("stroke-width", "2.5px");

 svg.append("svg:line").
  attr("stroke", "black").
  attr("x1", 10).
  attr("y1", 30 ).
  attr("x2", 60 ).
  attr("y2", 30);

 svg.append("svg:line").
   attr("stroke", "black").
  attr("x1", 10).
  attr("y1", 50 ).
  attr("x2", 60 ).
  attr("y2", 50).
  attr("stroke-dasharray", "0,2 1");

svg.append("svg:text").
attr("x", 65).
attr("y", 10).
text("[0.90,1]")

svg.append("svg:text").
attr("x", 65).
attr("y", 30).
text("[0.75,0.90[")

svg.append("svg:text").
attr("x", 65).
attr("y", 50).
text("]0.60,0.75[")

 //Per-type MARKERS, as they don't inherit styles.
  svg.append("svg:defs").selectAll("marker")
 .data(["medium"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 20)
.attr("refY", -1.5)
.attr("markerWidth", 6)
 .attr("markerHeight", 6)
 .attr("orient", "auto")
  .append("svg:path")
 .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var circle = svg.append("svg:g").selectAll("circle")
 .data(force.nodes())
.enter().append("svg:circle")
  .attr("r", 20)
 .call(force.drag);

var text = svg.append("svg:g").selectAll("g")
.data(force.nodes())
.enter().append("svg:g");

//A copy of the text with a thick white stroke for legibility.
text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.attr("class", "shadow")
.text(function(d) { return d.name; });

text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });

  //Use elliptical arc path segments to doubly-encode directionality.
  function tick() {
  path.attr("d", function(d) {
   var dx = d.target.x - d.source.x ,
    dy = d.target.y - d.source.y,
      dr=0;
      //dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + 
  d.source.x + "," + 
  d.source.y + "A" + 
  dr + "," + dr + " 0 0,1 " + 
  d.target.x + "," +
  d.target.y;

   });

  circle.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
   });

  text.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
 });
}

</script>


    <textarea rows="2" cols="50" style="position:fixed; top:0px;right:0px;" autofocus="true" >
     <<?php echo $b; ?>
      </textarea>


       </body>

    </html>

Answer 1

更改viewBox属性以使第二个向量为正值对我有效：

  svg.append("svg:defs").selectAll("marker")
 .data(["medium"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 5 10 10")
.attr("refX", 20)
.attr("refY", -1.5)
.attr("markerWidth", 6)
 .attr("markerHeight", 6)
 .attr("orient", "auto")
  .append("svg:path")
 .attr("d", "M0,-5L10,0L0,5");

D3箭头标记

调整后的兰德

1 个答案: