小编A_u*_*ser的帖子

如何获得svg:g元素的宽度

我目前正在使用svgJavaScript中的元素.我是新手.

我的问题是我有一个svg元素,我有多个svg:g元素.在我的svg:g元素中,我有各种其他的svg元素.

    <svg>
     <g class="my-class">
      <g class "c1">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c2">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c3">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
    </g>
   </svg>
Run Code Online (Sandbox Code Playgroud)

g 动态附加在我的

g"my_class"

现在我想将svg宽度设置为宽度g.my_class宽度.

var svgWidth  =   $('.my-class').width()
alert(svgWidth); …
Run Code Online (Sandbox Code Playgroud)

javascript jquery svg width

62
推荐指数
2
解决办法
4万
查看次数

如何在javascript字典中使用键查找值

我有一个关于Javascript字典的问题.我有一个字典,其中动态添加键值对,如下所示:

var Dict = []
var addpair = function (mykey , myvalue) [
  Dict.push({
    key:   mykey,
    value: myvalue
  });
}
Run Code Online (Sandbox Code Playgroud)

我将调用此函数并将其传递给不同的键和值.但现在我想根据密钥检索我的值,但我无法这样做.有谁能告诉我正确的方法?

var givevalue = function (my_key) {
  return Dict["'" +my_key +"'"]         // not working
  return Dict["'" +my_key +"'"].value // not working
}
Run Code Online (Sandbox Code Playgroud)

由于我的密钥是变量,我无法使用 Dict.my_key

谢谢.

javascript dictionary

14
推荐指数
1
解决办法
7万
查看次数

如何为svg元素提供hsl颜色值

我想问一下,如果已经读过可以给svg元素提供hsl颜色值.但是当我尝试这样的时候

var color = hsl(0, 100%, 50%);

circle.attr("fill" , color);
Run Code Online (Sandbox Code Playgroud)

我收到错误"意外号码"

任何人都可以指导正确的方法,并且svg也支持所有的hsl颜色

谢谢

javascript svg

12
推荐指数
1
解决办法
1万
查看次数

如何使用d3.js避免图中的log 0

我目前正在使用库d3.js.I我有使用 动态线图的线图 这里我们有绘制功率线性和日志的选项.但我的问题是我的数据集中可能有一些值为零,因为log 0未定义,因此代码无法绘制它.在我的代码中,比例设置如下

y = d3.scale.log().domain([0.1, max_y _value]).range([h, 0]).nice();
Run Code Online (Sandbox Code Playgroud)

这就是它的使用方式

  lineFunction = d3.svg.line()
        .y(function(d) {
          return y(d);
        });
Run Code Online (Sandbox Code Playgroud)

我知道这是一个奇怪的问题.但是有一种方法我可以处理log 0值,这样如果我有单个零值,其余的都正确绘制.我是否可以在同一语句中给出两个域和范围(处理0值),如果是,它将如何绑定到y轴?

谢谢任何帮助将不胜感激.

javascript d3.js

8
推荐指数
1
解决办法
5022
查看次数

当svg的高度动态变化时如何使用viewbox

我有一个可调整大小的div.它有两个内部div.其中一个内部div有一个svg元素.

在svg元素中,我正在动态添加和删除内容,这样每次我在svg中添加内容时.我通过向它添加20px来增加它的高度,当我删除时,我将高度减去20px.当我的svg高度大于其父div时,父div中会出现一个滚动条.类似地,当svg height小于父div时,将删除滚动条.

当我进行大小调整时,问题就出现了.我在svg中添加了一个viewbox选项来调整大小.但是当我增加大小时,我的一些svg元素是不可见的.当我减小尺寸时,我的svg会放在较低的位置,留下空的空间.

这一切都搞砸了我如何处理svg位置/高度与viewbox属性.

我试图用一个小提琴来模拟某种行为.但是svg中的元素不是动态添加的,而且svg高度是常量.

链接到我的代码

任何帮助将不胜感激

javascript svg viewbox

7
推荐指数
1
解决办法
1万
查看次数

使用indexOf方法在2D数组中查找值

我想问一下我在JavaScript中关于2D数组的问题,类似于:

var array = [[2,45],[3,56],[5,67],[8,98],[6,89],[9,89],[5,67]]
Run Code Online (Sandbox Code Playgroud)

也就是说,在每个索引上,我也有一个数组.

假设我的第二个索引中有一个值56,我想要相应的第一个索引(即上例中的3个).

我可以使用循环(如果没有其他选项),但有没有更好的方法?

另外,我知道indexOfJavaScript中的方法,但是当我这样调用它时它不会返回索引:

array.indexOf(56);
Run Code Online (Sandbox Code Playgroud)

任何见解都会有所帮助.

javascript indexing

5
推荐指数
2
解决办法
1万
查看次数

添加视图框时鼠标位置的更改

我目前正在学习和使用JavaScript和SVG,我是新手.这是我的情景

我有一个div里面有一个SVG.

<div id "O_div">
  <svg>
     <line x1= "0" x2 = "0" y1 ="0" y2 ="0">
     </line>
  <svg>
</div>
Run Code Online (Sandbox Code Playgroud)

现在我想知道相对于我的div的鼠标位置,所以我写了下面的代码

odiv = document.querySelector('#O_div');

XOffset = $(Odiv).position().left;
YOffset = $(Odiv).position().top;

   // And on my mouse move event 
            $('#O_div').mousemove(function(event) {
                var mouseX = event.clientX - XOffset;
                var mouseY = event.clientY - YOffset;
               // Here I am setting my line x and y coordinate equal mouseX and mouseY
               //So that line moves according to mouse move movement.           
            });
Run Code Online (Sandbox Code Playgroud)

它工作正常.但是当我使用查询resizable向我的div添加调整大小功能时出现问题.为了调整我的svg大小,我在其中添加了一个viewBox选项.现在我的svg看起来像这样

<svg viewBox="0 0 450 …
Run Code Online (Sandbox Code Playgroud)

javascript svg viewbox offset mousemove

5
推荐指数
1
解决办法
2564
查看次数

如何在javascript中生成浅色调

你好,我在JavaScript工作,并希望为我的图形生成颜色.我希望每行都有一个新颜色,颜色应该是浅色.

我已经阅读过java脚本中的颜色生成问题

JavaScript中的随机颜色生成器

因为我想为我的线条添加新颜色,所以随机数生成在我的情况下不起作用此外颜色应该很轻

我已经阅读了有关RGB值的颜色,但我没有发现它们遵循任何模式如何选择浅色

所以任何人都可以指导我,因为有一种方法可以按顺序生成颜色(避免随机),只选择浅色或任何其他功能,使深色更亮

谢谢

http://cloford.com/resources/colours/500col.htm

javascript

2
推荐指数
1
解决办法
4567
查看次数

两个 svg 文本元素之间的空间

我目前正在使用 JavaScript 的 SVG 元素。

这是我的场景。

我有一个 svg 元素,其中有两个像这样的文本元素

<svg>
  <g transform = "translate(0, 20)">
     <text style="font-size: 0.5em;" x="0" y="-4"> text </text>
     <text style="font-size: 0.5em;" x="70" y="-4"> value </text>
  </g> 
<svg>
Run Code Online (Sandbox Code Playgroud)

看起来像这样很好

文本值

我使用了 font-size 0.5em,因为我希望在调整 svg 大小时调整文本大小。(通过使用 jquery 可调整大小)它工作正常,但问题是当我调整 svg 大小时,文本之间的间距会减小,并且在某些情况下由于固定的 x 和 y 属性,文本变得太大以至于两个文本彼此重叠。

有没有办法避免这个问题。一种可以保持两个文本之间的间距不变或者文本可以相对放置的方法。

javascript svg text

2
推荐指数
1
解决办法
1356
查看次数

标签 统计

javascript ×9

svg ×5

viewbox ×2

d3.js ×1

dictionary ×1

indexing ×1

jquery ×1

mousemove ×1

offset ×1

text ×1

width ×1