个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我想寻求帮助如何设置正在进行的动画中的六边形形状的起点。根据我的屏幕截图，我的问题是我的代码始终从六边形形状的前半部分开始。
我尝试更改我的六边形数据，但问题仍然不在动画的正确起点。
您可以检查下面我的代码有什么问题。提前致谢。
<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="animation"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script>
/*https://codepen.io/MarcBT/pen/wcLCe/*/
var h = (Math.sqrt(3)/2.2),
radius = 100,
xp = 200,
yp = 200,
hexagonData = [
{ "x": (radius/2+xp) , "y": (-radius*h+yp)},
{ "x": -radius/2+xp, "y": -radius*h+yp},
{ "x": -radius+xp, "y": yp},
{ "x": -radius/2+xp, "y": radius*h+yp},
{ "x": radius/2+xp, "y": radius*h+yp},
{ "x": radius+xp, "y": yp},
];
drawHexagon =
d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("cardinal-closed")
.tension(".1")
var svgContainer =
d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 600);
var svgContainer = d3.select("#animation") //create container
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
var path = svgContainer.append('path')
.attr('d', drawHexagon(hexagonData))
//.attr('d',line(pointData))
.attr('stroke', "#E2E2E1")
.attr('stroke-width', '4')
.attr('fill', 'none');
var totalLength = path.node().getTotalLength();
var percent = 100;
console.log(totalLength);
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
//.transition()
//.duration(2000)
//.ease("linear")
.attr("stroke-dashoffset",0);
var path1 = svgContainer.append('path')
.attr('d', drawHexagon(hexagonData))
.attr('stroke', "green")
.attr('stroke-width', '4')
.attr('fill', 'none');
var totalLength = path1.node().getTotalLength();
var percent = -30;
//console.log(totalLength);
path1
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset",totalLength )
// .attr("fill", "rgba(255,0,0,0.4)")
.transition()
.duration(2000)
.attr("stroke-dashoffset", ((100 - percent)/100) *totalLength)
</script>
</body>
</html>最佳答案
这是您想要做的事情的 fiddle :https://jsfiddle.net/udsnbb5m/2/
动画从六边形的第一个点开始。然而你的点不是六边形的顶点。您可以这样更改:
d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("cardinal-closed")
.tension("0.90") // Previously 0.1
好的，动画正常开始了。
现在我们必须更改六边形的方向。您可以直接修改点坐标。 (我就是这么做的)
hexagonData = [
{ "x": xp, "y": -radius+yp}, //5
{ "x": -radius*h+xp , "y": -radius/2+yp}, //4
{ "x": (-radius*h+xp) , "y": (radius/2+yp)}, //3
{ "x": xp , "y": radius+yp}, //2
{ "x": radius*h+xp , "y": radius/2+yp}, //1
{ "x": radius*h+xp , "y": -radius/2+yp}, //6
];
请注意，您可能可以使用此属性来做到这一点:
.attr('transform','rotate(-45)');
关于javascript - D3 js六边形进度动画起点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44516041/
25
4
0
可以用纯 CSS3 创建这样的六边形吗？ 谢谢你的帮助! 最佳答案 一个简单的搜索就找到了:CSS Hexagon Tutorial 引用自网站: Put a 104px × 60px div wit
我有一个简单的六边形网格，我在其中选择一组六边形，然后用一些随机点填充这些六边形。 让我解释一下生成点的具体过程: 我使用六 Angular 坐标列表选择六边形。 将六边形分组为区域。 分别为每个区域
如何实现如下所示的六边形 ImageView 。 http://imgur.com/1PEGuQu 请注意，我尝试了这个问题的解决方案: How to give hexagon shape to Im
我正在尝试制作一款游戏，让用户获得经验值并提高等级，如下图所示。 我想通过使用进度条来实现这一点，但我无法制作一个六边形的进度条。 黄线应该随着用户积分的增加而增加。 谁能告诉我如何实现这一点？(我试
我正在尝试制作可以绘制五边形六边形等的函数。算法有问题，我应该将线条与 pygame.draw.line 进行比较吗？看起来围绕确定线坐标的工作太多了。有没有简单的方法来绘制它们？我也不知道另一个可以
我正在尝试创建一个六边形小部件。这应该看起来像这样: (请忽略横线) 在手机上是这样的: 现在六边形本身应该相当容易，网上有很多关于如何创建它们的文档。但是，关于如何添加这样的文本的信息很少。 通常，
我想用 ggplot 的漂亮框架创建一个绘图。这是一个六边形的密度图。我使用了 https://www.r-graph-gallery.com/329-hexbin-map-for-distribut
我是jointJS的新手，我需要使用JointJS创建自定义形状，我尝试使用矩形创建菱形，使其高度和宽度相同，然后旋转45度，如下所示， var diamond = new joint.shapes
这个问题在这里已经有了答案: How to make a curved edge hexagon by using CSS (6 个答案) 关闭 8 年前。 我正在尝试使用 CSS 制作一个形状:圆
我有一个由 CSS 创建的六边形。我试图在六边形内获取标题、段落和按钮，但所有这些元素都隐藏在格式化前后的六边形后面。这是代码的链接:https://jsfiddle.net/o8a3pm3h/6/
这不是关于如何使单个元素成为六边形的问题。有很多这样的。 这是一个问题，看看是否有办法创建纯 css 六边形背景。 我得到了 kind of close by creating triangles :
是否有机会在六边形内放置图像？我习惯了hexagonal shaped cells in html ，但我无法用(背景？)图像填充它。 这是我尝试过的: .top { height: 0; w
我喜欢将 CSS3 六边形置于 div 的中心(请查看下面的屏幕截图)。我使用 Foundation Framework，因此 Hexagon 由列包装器包装(在本例中使用类“warpper”)。 我
我有一个六边形，我想在它的每个 Angular 上写点东西。确切地说，我想从六边形的外部区域命名它的每个 Angular 。你可以在这个 jsfiddle 中看到代码.这是我现在拥有的: HTML:
我制作了一个具有笔划宽度的圆形六边形，但顶部和底部曲线较暗。如何给边框均匀的描边宽度？这是我的 svg 代码
我正在尝试在 Android 上实现圆角六边形 ImageView 完全像这个但是六边形: 我尽了最大的努力，但都失败了，我确实找到了this答案是完美的，因为它可以让你输入所需的边数，剩下的就由它来
我在这个网站上有问题:http://www.dark-project.cz/wesnoth/map-view/1 (点击单位)。在我的 Javascript 源代码中 http://www.dark-
我正在通过 Unity 创建一个简单的六边形几何数学游戏。这确实与 Unity 无关。 我借了Image来自 https://catlikecoding.com/unity/tutorials/ ,
我试图在六边形 div 周围放置一个边框，或者更准确地说是 3 个 div 的六边形可见区域。我已经尝试了一些不同的方法来创建一个边框来玩弄 div 的可见性。我在下面的示例中拥有的是我最接近的，但仍
是否可以创建一个属性设置为 % 而不是 px 的六边形？所以我可以在我的网站中创建一个宽度和高度为 100px 的 div 容器，设置为 100% 宽度和高度的六边形会占据整个 div？感谢您的任何回
我是一名优秀的程序员,十分优秀！