Expected length error in Ractive/Paths.js demo

Question

I'm trying out a simplified version of the pie chart demo from Paths.js' website at http://andreaferretti.github.io/paths-js-demo/ , to understand how it works when used with Ractive. I have most of it working locally, except for one error that I've not been able to resolve.

A working demo is at https://codepen.io/alexlibby/pen/xjvOvQ - I am trying to get the country names and population figures to display over the relevant segment in the pie chart. At the moment, it is showing an error in the browser console, and that country names / population figures are not shown:

Error: <text> attribute x: Expected length, "{pie.sector.centroid[0]}"

I've researched what I think could be the issue (in that the value being passed to the centroid attribute is incorrect), but I'm struggling to understand what it should be. I've checked on SO and can't find anyone with a similar issue.

I'm also using a more recent version of Ractive and the Path.js Pie plugins - is it possible that this could be causing an issue? I have used Browserify to assemble the Node dependencies into one file - my source code starts on around line 5 in the JS section, and finishes at line 26.

Could someone please help point me in the right direction?

Answer 1

你必须使用胡须而不是单个大括号： x={{pie.sector.centroid[0]}} y={{pie.sector.centroid[1]}}