0
我有一个基于JSON文件生成的d3概念地图。我修改了一些我在网上找到的其他代码，但我很难浏览它并找出在哪里放置东西。看到我的版本的Live去这里：svg元素内的音频d3地图不能播放
http://melijimenez.com/fdm177/public/index.php
如果你点击你，要么对应于某个项目或类别的圆节点的项目。我想如果该项目是一个ditem，有一个播放按钮，用户可以点击播放音频。 “不要忘记我的社区”会有一个播放按钮，我可以点击该按钮播放与该节点相对应的剪辑。
我已成功加入HTML5音频元素到每个ditem节点通过修改该函数
function b(X) {
var X = E.selectAll(".node").data(X, u);
var Y = X.enter().append("g").attr("transform", function(aa) {
var Z = aa.parent ? aa.parent : {
xOffset: 0,
x: 0,
y: 0
};
return "translate(" + Z.xOffset + ",0)rotate(" + (Z.x - 90) + ")translate(" + Z.y + ")"
}).attr("class", "node").on("mouseover", g).on("mouseout", n).on("click", G);
Y.append("circle").attr("r", 0).attr("fill", "#fff");
Y.append("text").attr("font-size", 0).attr("class", "label");
Y.append("audio").attr("id", "clip").attr("type","audio/mpeg").attr("src", function(jsonItem) {
return jsonItem.audio_loc
});
/**Y.append("audio").attr("id","clip").append("source").attr("src", function(jsonItem) {
return jsonItem.audio_loc
});**/
X.transition().duration(w).ease(F).attr("transform", function(Z) {
if (Z === L.node) {
return null
}
var aa = Z.isGroup ? Z.y + (7 + Z.count) : Z.y;
return "translate(" + Z.xOffset + ",0)rotate(" + (Z.x - 90) + ")translate(" + aa + ")"
});
X.selectAll("circle").transition().duration(w).ease(F).attr("r", function(Z) {
if (Z == L.node) {
return 100
} else {
if (Z.isGroup) {
return 7 + Z.count
} else {
return 4.5
}
}
});
X.selectAll("text").transition().duration(w).ease(F).attr("dy", ".3em").attr("font-size", function(Z) {
if (Z.depth === 0) {
return 10
} else {
return 15
}
}).text(function(Z) {
return Z.name
}).attr("text-anchor", function(Z) {
if (Z === L.node || Z.isGroup) {
return "middle"
}
return Z.x < 180 ? "start" : "end"
}).attr("transform", function(Z) {
if (Z === L.node) {
return null
} else {
if (Z.isGroup) {
return Z.x > 180 ? "rotate(180)" : null
}
}
return Z.x < 180 ? "translate(" + t + ")" : "rotate(180)translate(-" + t + ")"
});
X.selectAll("text.label-stroke").attr("display", function(Z) {
return Z.depth === 1 ? "block" : "none"
});
X.exit().remove()
}
我还修改的onclick功能播放音频被点击节点时：
if (Y.type === "ditem") {
clip = $("#clip")[0];
console.log("node has been clicked")
if (clip.paused == false) {
clip.pause();
alert('clip paused');
} else {
clip.play();
alert('clip playing');
}
//window.location.href = "/" + Y.slug;
return
}
单击该节点时，会生成控制台消息“节点已被单击”。然而，对于音频开始播放我得到：
concept-map.js:595 Uncaught TypeError: clip.play is not a function
at SVGGElement.G (concept-map.js:595)
at SVGGElement.__onclick (d3.js:1)
下面是完整的代码：http://melijimenez.com/fdm177/public/js/concept-map.js
太感谢你了！
PS：我已经发布了关于这张地图的另一个问题，但由于我发布的问题是不同的和不相关的，我想我会为这个特定的查询做一个单独的帖子。