相关疑难解决方法(0)

我已经看到了一些使用CSS来影响SVG元素风格的例子,但到目前为止还没有一个例子可以帮助我解决关于标记的问题.老实说,我仍然在研究两者的语法(SVG和CSS).

我想定义一个标记,然后能够在不同的地方使用它,但颜色不同.

例如:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
     viewBox="0 0 180 320">

<defs>
    <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1">
        <line x1="0" y1="-1" x2="0" y2="1" />
        <line x1="-1" y1="0" x2="1" y2="0" /> 
        <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" />
        <line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" />
    </marker>
</defs>

.AsteriskMarkerClass { stroke:red; }
    <path d="M 60,100"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

.AsteriskMarkerClass { color:green; }
    <path d="M 90,140"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

</svg>

如果有人可以告诉我如何做到这一点,我将不胜感激.

我正在使用D3绘制有向非循环图,我希望能够通过将边(和箭头)的颜色更改为该路径来突出显示所选节点的路径.我很容易改变边缘颜色,但我无法弄清楚如何改变相应箭头的颜色.在最适用的来源,我发现表明,这是没有可能的,但它也从大约两年前,所以我想看看是否一切都变了.我用来创建链接,箭头和更新链接颜色的代码如下:

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

. . .

var link = graph.append("svg:g").selectAll("line")
     .data(json.links)
   .enter().append("svg:line")
     .style("stroke", "gray")
     .attr("class", "link")
     .attr("marker-end", "url(#end)");

. . .

function highlightPath(node) {
  d3.selectAll("line")
    .style("stroke", function(d) { 
      if (d.target.name == node) {
        highlightPath(d.source.name);
        return "lightcoral";
      } else {
        return "gray";
      }
    });
}

任何建议都会很棒.谢谢.

我是D3的新手,我一直试图让我的箭头颜色与我在箭头颜色中的颜色相同,参考此处给出的代码解决方案.

它是一个有向图,json文件负责链接各个节点.我试图确保无论我的链接是什么颜色,我的箭头都会得到相同的颜色,但似乎不起作用.这是我的js代码:

var width = 960,
height = 500;

// initialization
var svg = d3.select("div").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .gravity(0) // atom's cohesiveness / elasticity of imgs :)
    .distance(150) // how far the lines ---> arrows :)
    .charge(-50) // meta state transition excitement
    .linkDistance(140)
    //.friction(0.55) // similar to charge for quick reset :)
    .size([width, height]); // degree of freedom to the canvas

// exception handling
d3.json("/assets/javascripts/position.json", function(error, json) {
     if (error) throw error;
          // …