草庐IT

javascript - D3 缩放时保持线宽相同

coder 2025-02-16 原文

下面创建两条粗细为 8 的线:

var a = [23,50]
for (b = 0; b < a.length; b++) {
var stripe = vis.selectAll("line.stripep")
.data(connections.filter(function(d,i) { return i == a[b];  }))
.enter().append("svg:line")
  .attr("class", "stripe")
  .attr("stroke", function(d) { return "#000000"; })
  .attr("stroke-linecap", 'round')
  .style("stroke-width",  function(d) { return 8; } )
  .attr("x1", function(d) { return x(d.station1.longitude); })
  .attr("y1", function(d) { return y(d.station1.latitude); })
  .attr("x2", function(d) { return x(d.station2.longitude); })
  .attr("y2", function(d) { return y(d.station2.latitude); })


}

我有以下缩放功能

function zoomed() {

vis.selectAll("line.route, line.stripe, line.stripep")
.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
vis.selectAll("line.stripep")
.attr("stroke-width", 8 / (zoom.scale()))

但是线宽没有变化，这是什么问题。

我也试过:

vis.selectAll("line.stripep")
.style("stroke-width", 8 / (zoom.scale()))

最佳答案

这段CSS样式完美解决了问题:

.line {
    stroke-width: 2px; // desired stroke width (line height)
    vector-effect: non-scaling-stroke; // line height won't scale
}

无需额外的 JS 代码。

关于javascript - D3 缩放时保持线宽相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36885260/

javascriptD334functionsectiond3.js

有关javascript - D3 缩放时保持线宽相同的更多相关文章

  1. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  2. ruby-on-rails - 优雅的 Rails : multiple routes, 相同的 Controller Action - 2

    让多条路线去同一条路的最优雅的方式是什么ControllerAction？我有:get'dashboard',to:'dashboard#index'get'dashboard/pending',to:'dashboard#index'get'dashboard/live',to:'dashboard#index'get'dashboard/sold',to:'dashboard#index'这很丑陋。有什么“更优雅”的建议吗？一个类轮的奖励积分。 最佳答案 为什么不只有一个路由和一个Controller操作，并根据传递给它的参数来

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - 获取并发布相同匹配项的请求 - 2

    在我的路线文件中我有:match'graphs/(:id(/:action))'=>'graphs#(:action)'如果是GET请求(工作)或POST请求(不工作)，我想匹配它我知道我可以使用以下方法在资源中声明POST请求:post'/'=>:show,:on=>:member但是我怎样才能为比赛做到这一点呢？谢谢。 最佳答案 如果你同时想要POST和GETmatch'graphs/(:id(/:action))'=>'graphs#(:action)',:via=>[:get,:post]编辑默认值可以设置如下match'g

  5. ruby-on-rails - 多次选择一个随机数，但绝不会两次选择相同的随机数 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？

  6. ruby - 如何保持我不常用的编程语言技能 - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗？Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby​​-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的，这与ruby​​有很大不同。由于我与ruby​​之间的差距如此之大，我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西，我想知道是否有一些我可以订阅的网站，并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗？

  7. ruby-on-rails - 如何通过 POST 发送多个相同的键/参数？ - 2

    如果我必须在一个HTTP请求中发送一堆post参数，所有这些参数都具有相同的名称，我该如何构建要发布的data对象？想象一个带有一些复选框的表单，它们都具有相同的name属性但具有不同的值(如果它们被选中):我想用ruby​​构建它(但它需要根据在表单上选择的内容动态创建):data={"color"=>"red","color"=>"green","color"=>"blue"}然后将数据发送到某个URL:Net::HTTP.post_form(url,data)我无法控制接收端，所以我必须发送它期望接收的参数。怎么办？ 最佳答案

  8. ruby - 使2个数组大小相同 - 2

    2个数组的数组:a=[[1,2],[22,11],[18,9]]b=[[1,81]]用[0,0]填充第二个的最佳方法是什么，以便它们具有相同的大小？ 最佳答案 b.fill(b.size..a.size-1){[0,0]} 关于ruby-使2个数组大小相同，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/29725615/

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - 优雅的链式 'or' 用于测试 Ruby 中的相同变量 - 2

    怎样说才是明智的呢？if@thing=="01"or"02"or"03"or"04"or"05"(数字包含在数据类型字符串的列中。) 最佳答案 制作数组并使用.include?if["01","02","03","04","05"].include?(@thing)如果值真的都是连续的，你可以使用像(1..5).include?这样的范围对于字符串，你可以使用:if("01".."05").include?(@thing) 关于ruby-优雅的链式'or'用于测试Ruby中的相同变量，我

随机推荐