Svg(多个)标记不出现在chrome浏览器
Svg(Mulitple) Marker not appearing in chrome browser
我必须在我的条形图中显示两个svg标记。在mozilla下面的代码工作得很好,它显示两个标记,但当我在chrome浏览器中尝试它不显示。只有一个标记出现了。
这里是小提琴- http://jsfiddle.net/keshav_1007/f4warsnu/2/
var yMax = 520; // overriding y axis
var score=8000/100;
var svg = dimple.newSvg("#chartContainer", 600, 600);
var data = [{
"Brand":"A",
"Day":"Mon",
"SalesVolume":100 },
{
"Brand":"B",
"Day":"Mon",
"SalesVolume":200 }];
var myChart = new dimple.chart(svg, data);
<!-- console.log(data[1].Brand,data[1].SalesVolume); -->
myChart.setBounds(100, 50, 300, 300)
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addMeasureAxis("y", "SalesVolume");
y.overrideMax = yMax;
y.addOrderRule("SalesVolume");
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap=0.7;
myChart.addLegend(120, 400, 300, 30, "left");
s.addEventHandler("mouseover", onHover);
s.addEventHandler("mouseleave", onLeave);
myChart.draw();
d3.selectAll("rect").on("mouseover", null);
s.shapes.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, s); });
var defs = svg.append("defs");
defs.append("marker")
.attr("id", "triangle-start")
.attr("viewBox", "-5 -5 10 10")
.attr("refX", -1)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.
attr("class", "marker")
.attr("d", "M 0 0 L 3 4 L 3 -4 z");
svg.append("line")
.attr("x1",205)
.attr("x2", 295)
.attr("y1", (y._scale(score)))
.attr("y2",(y._scale(score)))
.attr('stroke','black')
.attr("marker-end", "url(#triangle-start)")
.style("stroke-dasharray", "3");
var defs1 = svg.append("defs1");
defs1.append("marker")
.attr("id", "triangle-start1")
.attr("viewBox", "-5 -5 10 10")
.attr("refX", -1)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("class", "marker")
.attr("d", "M 0 0 L 3 4 L 3 -4 z");
svg.append("line")
.attr("x1",205)
.attr("x2", 295)
.attr("y1",200)
.attr("y2",200)
.attr('stroke','black')
.attr("marker-start", "url(#triangle-start1)")
.style("stroke-dasharray", "3");
function onHover(e) {
console.log("on enter");
var cx = parseFloat(e.selectedShape.attr("x")),
cy = parseFloat(e.selectedShape.attr("y"));
// Set the size and position of the popup
var width = 150,
height = 70,
x = (cx + width + 10 < svg.attr("width") ?
cx + 10 :
cx - width - 20);
y = (cy - height / 2 < 0 ?
15 :
cy - height / 2);
// Create a group for the popup objects
popup = svg.append("g");
// Add a rectangle surrounding the text
popup .append("rect")
.attr("x", x + 5)
.attr("y", y - 5)
.attr("width", 150)
.attr("height", height)
.attr("rx", 5)
.attr("ry", 5)
.style("fill", 'white')
.style("stroke", 'black')
.style("stroke-width", 2);
// Add multiple lines of text
var pos1 = d3.select("path").node().getTotalLength();
console.log(pos1);
var pos2 = d3.select("path").node().getPointAtLength(312)
console.log(pos2);
console.log(pos2.x);
console.log(pos2.y);
}
function onLeave(e) {
console.log("on Leave");
if (popup !== null) {
popup.remove();
}
}
请告诉我为什么?
向dom添加一个名为defs1:
的元素svg.append("defs1");
这不是一个有效的SVG元素。我不知道你在这里想做什么但你应该使用group元素:
svg.append("g");
相关文章:
- CORS-服务器端cookie没有保存在chrome浏览器上
- 我想用Javascript网站在开放的Chrome浏览器上执行功能
- Chrome浏览器“;挂起”;同时在循环中执行AJAX请求
- 通过Android Chrome浏览器下载文件
- Angularjs ng-options 问题仅适用于 Chrome 浏览器
- 当页面加载时,使谷歌chrome浏览器成为全屏浏览器
- 使用javascript在chrome浏览器的新选项卡中以程序方式打开URL
- 当代码放在Joomla文章中时,Jquery拖放在Chrome浏览器中无法正常工作
- Chrome浏览器:未从响应标头设置cookie
- Javascript只能在Chrome浏览器中使用,不能在Firefox中使用
- 如何禁用chrome浏览器中的web应用程序
- 我可以禁用Chrome浏览器中的“你已经全屏”通知吗
- 为什么asp按钮的java脚本click()函数在chrome浏览器中不起作用
- 节点检查器无法打开chrome浏览器,引发错误ENOENT
- 如何从Google Chrome浏览器中打开浏览窗口
- JavaScript在新的选项卡中打开,而不是在Chrome浏览器中打开窗口
- 常见页眉页脚的 JavaScript 代码在 Chrome 浏览器中不起作用
- jQuery Slider 在 Android Chrome 浏览器上不起作用
- 检测 Chrome 浏览器窗口的宽度和高度,以防止元素溢出
- 即使它在 Chrome 浏览器上不起作用,也可以单击