Question

我正在创建具有三角形形状的图例。一个是＆＃34;是＆＃34;，另一个是＆＃34;否＆＃34;。通过运行下面的代码，它会生成两个三角形，但它们是重叠的。我试图通过使用这行代码from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Firefox() driver.get("http://windspeed.atcouncil.org/") button2 = driver.find_element_by_css_selector('submit')来分隔它们，但似乎它不起作用。谁能告诉我如何解决它？谢谢！ Click here! This is an html sreenshot for this part of script

.attr("y", function(d,i) {return 50+i*40;})

Answer 1

您必须更新组的translate y属性而不是路径。此外，还不需要对文本和路径的y属性进行额外的计算。

.attr("transform", function(d, i) {
        return "translate(" + (w + 150) + "," + (30+i*40) + ")";
 });

工作代码段

＆＃13;

var w=40; //Sample chart width
 var color = d3.scale.category20c();
var svg = d3.select("body").append("svg").attr({ height: 500, width: 400 });

var legendname = ["Yes", "No"];
var legend = svg.selectAll(".legend")
  .data(legendname)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) {
    return "translate(" + (w + 150) + "," + (30+i*40) + ")";
  });

legend.append("path")
  .attr("d", d3.svg.symbol().type("triangle-up").size(128))
  .style('fill', function(d,i) {
    return color(i);
  });

legend.append("text")
   .attr("dx",10)
   .attr("dy",".4em")
  .text(function(d) {
    return d;
  })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

重叠的传说d3.js

1 个答案: