相关疑难解决方法(0)

如何在SVG线上放置箭头三角形？

我是SVG的新手,我想在两点之间划一条直线.到目前为止我使用此命令管理:

<line x1="50" y1="50" x2="150" y2="150" style="stroke:rgb(255,255,0); stroke-width:2" stroke-dasharray="5,3" />"

在这条线上添加微小三角形或箭头(均匀间隔)以指示方向的最简单方法是什么？

编辑1:

为了更清楚,我不是在线末端的箭头之后,而是沿着整条线的多个三角形(均匀间隔).如果可能的话,我想用一个指向线方向的三角形替换虚线中的每个破折号.

编辑2

根据Phrogz的建议,我创建了一个如下所示的页面,但没有显示任何内容.我究竟做错了什么？

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/com.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 70 90">
<defs>
<marker id="t" markerWidth="4" markerHeight="4"
        orient="auto" refY="2">
  <path d="M0,0 L4,2 0,4" />
</marker>
</defs>
<polyline points="0,0 0,50 20,70 40,10 42,8 44,10, 46,14 50,50" />
</svg>
<script type="text/javascript">
midMarkers(document.querySelector('polyline'),6);

    // Given a …

Run Code Online (Sandbox Code Playgroud)

svg lines

Osp*_*rey

2017 04-17

42
推荐指数

2
解决办法

6万
查看次数

如何在图形的 D3 节点中添加自定义颜色

在此处输入图片说明

我正在将 D3 api 用于图形，其中从父节点形成几个节点我想以每个父节点具有固定颜色而子节点具有不同颜色的方式为整个图的节点着色，即根节点总是有红色，左边的孩子是蓝色的，右边的孩子是绿色的，如果只有一个孩子在那里，它是绿色的。我正在使用这个 api，，

<!DOCTYPE html>
<html>
 <head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"></script>
    <style type="text/css">

 line.link {
  stroke: #ccc;
}

circle.node {
 fill: #000;
 stroke: #fff;
 stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

   var w = 960,
  h = 500,
  r = d3.scale.sqrt().domain([0, 20000]).range([0, 20]);

 var force = d3.layout.force()
.gravity(.01)
.charge(-120)
.linkDistance(60)
.size([w, h]);

var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);

d3.xml("flare.xml", "application/xml", function(xml) {
  var nodes = self.nodes = d3.select(xml).selectAll("*")[0],
    links = …

Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js force-layout

luc*_*fer

2015 01-23

4
推荐指数

1
解决办法

2万
查看次数