Question

到目前为止，我的地图正确渲染。我正在尝试创建自定义标记。我在app / assets / images / map-pin2.png中存储了我喜欢的图像。如何将其渲染到页面？现在图像没有出现。

<style>
path {
  stroke: grey;
  stroke-width: 1.00px;
  fill: #f8f4e8;
}
</style>

<script>
var width = 650,
    height = 380;

var projection = d3.geo.albersUsa()
    .scale(800)
    .translate([width / 2, height / 2])

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

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");

<!-- load and display the World -->
d3.json("json/usa_map.json", function(error, us) {
  g.selectAll("path")
    .data(us.features)
    .enter()
    .append("path")
    .attr("state", function(d) {
      return d.properties.NAME
    })
    .attr("d", path)
});

下面是我在下面添加标记的代码：

var marks = [{long: -75, lat: 43},{long: -78, lat: 41},{long: -70, lat: 53}];

svg.selectAll(".mark")
    .data(marks)
    .enter()
    .append("image")
    .attr('class','mark')
    .attr('width', 20)
    .attr('height', 20)
    .attr("xlink:href","/Users/Jwan/Dropbox/Turing/projects/opportunity_at_work/app/assets/images/map-pin2.png")
    .attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});
</script>

Answer 1

简单地说，您可以先在svg元素中创建def，然后像这样创建标记

svg.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 13)
.attr("refY", 5)
.attr("markerWidth", 30)
.attr("markerHeight", 30)
.attr("markerUnits","userSpaceOnUse")
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 12 6 0 12 3 6")
.style("fill", "#555");

并通过这样的marker-end和marker-start属性将此标记添加到您的路径中

 var link = svg.append('g')
  .attr('class', 'links')
  .selectAll('path')
  .data(graph.links)
  .enter().append('path')
  .attr("marker-end", "url(#triangle)")

Answer 2

没有其他问题（例如评论中的文件路径问题），问题在于：

.append("image")

应该是：

.append("svg:image")

重复here。

d3将自定义标记添加到d3地图

2 个答案: