Javascript 获得线条、起点和终点标记的一致颜色

我有一组线都有端点标记（四种类型之一）。它们有两种类型的开始标记之一（圆形或无）。我希望每一行及其开始和结束标记具有相同的颜色

我已经在

d3.csv

函数中将我的颜色定义为

var

。在我看来，问题在于第二个

defs

中我的开始标记的

id

。我为所有标记类型生成了id，而不仅仅是圆形/无选项。我想这里可能需要8个不同的ID（一个用于圆/无，另外四种不同的颜色表示四个端点标记的可能性）。此时，所有的开始标记都只显示为通用圆开始标记指定的颜色

-还包含csv文件和一些数据

以下是脚本：

    <script type="text/javascript">


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


d3.csv("data/myarrows.csv", dottype1, function(error, lines) {


  var data = [
    { id: 0, name: 'circle', path: 'M 0, 0  m -5, 0  a 5,5 0 1,0 10,0  a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12'}
  , { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
  , { id: 4, name: 'none', path: '', viewbox: '' }
    ]

var color = d3.scale.category10();

svg.append("g")
      .selectAll("line")
      .data(lines)
      .enter()
      .append("line")
      .attr("x1", function(d) { return d.x1; })
      .attr("y1", function(d) { return d.y1; })
      .attr("x2", function(d) { return d.x2; })
      .attr("y2", function(d) { return d.y2; })
      .attr("marker-start", function(d) { return 'url(#startmarker_' + d.startname  + ')' })
      .attr("marker-end", function(d) { return 'url(#marker_' + d.name  + ')' })
   //   .style("stroke", "brown")           
      .style("stroke", function(d) {return d.color = color(d.name); })           
   // .attr('stroke', function(d,i) { return color(i)})
      .style("stroke-width", 3)          
      .style("stroke-linecap", "square") 
               ;

svg.append("svg:defs")
      .selectAll("line")
      .data(data)
      .enter()
      .append("svg:marker") 
      .attr('id', function(d){ return 'marker_' + d.name})
      .attr('viewBox', function(d){ return d.viewbox })
      .attr('refX', 0)
      .attr('markerWidth', 4)
      .attr('markerHeight', 4)
   //   .style("stroke", "brown") 
     .style("stroke", function(d) {return d.color = color(d.name); })  
     //  .style("fill", "brown")        
       .style("fill", function(d) {return d.color = color(d.name); })  
       .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', function(d){ return d.path })
                 ;

svg.append("svg:defs")
      .selectAll("line")
      .data(data)
      .enter()
      .append("svg:marker") 
      .attr('id', function(d){ return 'startmarker_' + d.name})
      .attr('viewBox', function(d){ return d.viewbox })
      .attr('refX', 6)
      .attr('markerWidth', 3)
      .attr('markerHeight', 3)
 //   .style("stroke", "brown") 
      .style("stroke-width", 2)          
      .style("stroke", function(d) {return d.color = color(d.name); })  
       .style("fill", "none")          
      .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', function(d){ return d.path })
                 ;
});




function dottype1(d) {
  d.x1 = +d.x1x1;
  d.y1 = +d.y1y1;
  d.x2 = +d.x2x2;
  d.y2 = +d.y2y2;
  d.startname = d.starttype;
  d.name = d.endtype;
   return d;
}



  </script>

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）；
d3.csv（“数据/myarrows.csv”），点类型1，函数（错误，行）{
风险值数据=[
{id:0，名称：'circle'，路径：'m0，0m-5，0a5,5010,0100,0a5,5010-10,0'，视图框：'-6-612'}
，{id:1，名称：'square'，路径：'m0,0m-5，-5l5，-5l5,5l-5,5z'，视图框：'-5-5100'}
，{id:2，名称：'arrow'，路径：'M0,0M-5，-5L5,0L-5,5Z'，视图框：'-5-5100'}
，{id:3，名称：'stub'，路径：'m0,0m-1，-5l1，-5l1,5l-1,5z'，视图框：'-1-5210'}
，{id:4，名称：'none'，路径：''，视图框：'}
]
var color=d3.scale.category10（）；
svg.append（“g”）
.selectAll（“行”）
.数据（行）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）
.attr（“marker start”，函数（d）{return'url（#startmarker_'+d.startname+'）}）
.attr（“marker end”，函数（d）{return'url（#marker_'+d.name+'）}）
//.style（“笔划”、“棕色”）
.style（“笔划”，函数（d）{返回d.color=color（d.name）；}）
//.attr（'stroke'，函数（d，i）{返回颜色（i）}）
.style（“笔划宽度”，3）
.样式（“笔划线头”、“方形”）
;
append（“svg:defs”）
.selectAll（“行”）
.数据（数据）
.输入（）
.append（“svg:marker”）
.attr（'id'，函数（d）{return'marker_u'+d.name}）
.attr（'viewBox'，函数（d）{return d.viewBox}）
.attr（'refX'，0）
.attr（'markerWidth'，4）
.attr（'markerHeight'，4）
//.style（“笔划”、“棕色”）
.style（“笔划”，函数（d）{返回d.color=color（d.name）；}）
//.style（“填充”、“棕色”）
.style（“fill”，函数（d）{return d.color=color（d.name）；}）
.attr（'orient'、'auto'）
.append（'svg:path'）
.attr（'d'，函数（d）{return d.path}）
;
append（“svg:defs”）
.selectAll（“行”）
.数据（数据）
.输入（）
.append（“svg:marker”）
.attr（'id'，函数（d）{return'startmarker\uU2'+d.name}）
.attr（'viewBox'，函数（d）{return d.viewBox}）
.attr（'refX'，6）
.attr（'markerWidth'，3）
.attr（'markerHeight'，3）
//.style（“笔划”、“棕色”）
.样式（“笔划宽度”，2）
.style（“笔划”，函数（d）{返回d.color=color（d.name）；}）
.style（“填充”、“无”）
.attr（'orient'、'auto'）
.append（'svg:path'）
.attr（'d'，函数（d）{return d.path}）
;
});
功能点类型1（d）{
d、 x1=+d.x1x1；
d、 y1=+d.y1；
d、 x2=+d.x2x2；
d、 y2=+d.y2y2；
d、 startname=d.starttype；
d、 name=d.endtype；
返回d；
}

我已经提出了一个骇人的解决方案，但它不是最优的。在本例中，我只是删除了开始标记并添加了圆圈。我不得不向csv添加另一个变量，以根据圆的存在/不存在来改变圆的不透明度（0或1）。这里的问题是，圆圈不能很好地靠近线的末端。即使使用

.style（“笔划线帽”、“对接”）

该线仍与圆的边缘重叠

所以，我仍然在寻找一个使用开始标记的解决方案，但这是可以的

---

我已经提出了一个不切实际的解决方案，但它不是最优的。在本例中，我只是删除了开始标记并添加了圆圈。我不得不向csv添加另一个变量，以根据圆的存在/不存在来改变圆的不透明度（0或1）。这里的问题是，圆圈不能很好地靠近线的末端。即使使用

.style（“笔划线帽”、“对接”）

该线仍与圆的边缘重叠

所以，我仍然在寻找一个使用开始标记的解决方案，但这是可以的