我有一组所有都有结束标记的行(四种类型之一)。它们具有两种类型的起始标记之一(圆圈或无)。我希望每一行及其开始和结束标记具有相同的颜色。
我已在var
函数中将我的颜色定义为d3.csv
。在我看来,问题在于第二个id
内的defs
我的开始标记。我为所有标记类型生成了id,而不仅仅是circle / none选项。我认为我可能需要8个不同的ID(一个用于圆圈/无,以及四种不同的颜色,代表四种末端标记的可能性)。目前,所有开始标记都显示为分配给通用圆开始标记的颜色。
Here is a bl.ocks example - 这也包含带有一些数据的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>
答案 0 :(得分:0)
我做了一个hacky解决方案,但它不是最佳的。在这个例子中,我只是删除了开始标记并添加了圆圈。我必须在csv中添加另一个变量,以根据圆的存在/不存在来改变圆的不透明度(0或1)。这里的问题是圆圈不能很好地坐在线的末端。即使使用.style("stroke-linecap", "butt")
,该线仍然会与圆的边缘重叠。
所以,我仍然在寻找使用启动标记的解决方案,但这是好的。