{"action":"created","issue":{"url":"https://api.github.com/repos/ScottLogic/d3fc/issues/555","labels_url":"https://api.github.com/repos/ScottLogic/d3fc/issues/555/labels{/name}","comments_url":"https://api.github.com/repos/ScottLogic/d3fc/issues/555/comments","events_url":"https://api.github.com/repos/ScottLogic/d3fc/issues/555/events","html_url":"https://github.com/ScottLogic/d3fc/issues/555","id":106588860,"number":555,"title":"Add a 'classed' property to the series","user":{"login":"ColinEberhardt","id":1098110,"avatar_url":"https://avatars.githubusercontent.com/u/1098110?v=3","gravatar_id":"","url":"https://api.github.com/users/ColinEberhardt","html_url":"https://github.com/ColinEberhardt","followers_url":"https://api.github.com/users/ColinEberhardt/followers","following_url":"https://api.github.com/users/ColinEberhardt/following{/other_user}","gists_url":"https://api.github.com/users/ColinEberhardt/gists{/gist_id}","starred_url":"https://api.github.com/users/ColinEberhardt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ColinEberhardt/subscriptions","organizations_url":"https://api.github.com/users/ColinEberhardt/orgs","repos_url":"https://api.github.com/users/ColinEberhardt/repos","events_url":"https://api.github.com/users/ColinEberhardt/events{/privacy}","received_events_url":"https://api.github.com/users/ColinEberhardt/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ScottLogic/d3fc/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-15T16:02:57Z","updated_at":"2015-09-15T21:28:23Z","closed_at":null,"body":"A common use-case is to add multiple series to a chart and then apply styles to each of them. Currently this requires the use of `decorate`:\r\n\r\n    var macdLine = fc.series.line()\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).macd; });\r\n\r\n    var signalLine = fc.series.line()\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).signal; });\r\n\r\n    var divergenceBar = fc.series.line()\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).divergence; });\r\n\r\n    var multiSeries = fc.series.multi()\r\n        .series([divergenceBar, macdLine, signalLine])\r\n        .decorate(function(g, data, index) {\r\n            g.enter()\r\n                .attr('class', function(d, i) {\r\n                    return 'multi ' + ['divergence', 'macd', 'signal'][i];\r\n                });\r\n            decorate(g, data, index);\r\n        });\r\n\r\nWith the above code adding classes to the multi-containers.\r\n\r\nI think the above code is a little complex when all the user wants to do is style each series. How about we add a 'classed' property to each series:\r\n\r\n    var macdLine = fc.series.line()\r\n        .classed('macd')\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).macd; });\r\n\r\n    var signalLine = fc.series.line()\r\n        .classed('signal')\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).signal; });\r\n\r\n    var divergenceBar = fc.series.bar()\r\n        .classed('divergence')\r\n        .xValue(xValue)\r\n        .yValue(function(d, i) { return root(d).divergence; });\r\n\r\n    var multiSeries = fc.series.multi()\r\n        .series([divergenceBar, macdLine, signalLine]);\r\n\r\nThis would add the given class to each of the containers the series constructs, rather than applying it to the multi- containers."},"comment":{"url":"https://api.github.com/repos/ScottLogic/d3fc/issues/comments/140552336","html_url":"https://github.com/ScottLogic/d3fc/issues/555#issuecomment-140552336","issue_url":"https://api.github.com/repos/ScottLogic/d3fc/issues/555","id":140552336,"user":{"login":"chrisprice","id":433457,"avatar_url":"https://avatars.githubusercontent.com/u/433457?v=3","gravatar_id":"","url":"https://api.github.com/users/chrisprice","html_url":"https://github.com/chrisprice","followers_url":"https://api.github.com/users/chrisprice/followers","following_url":"https://api.github.com/users/chrisprice/following{/other_user}","gists_url":"https://api.github.com/users/chrisprice/gists{/gist_id}","starred_url":"https://api.github.com/users/chrisprice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrisprice/subscriptions","organizations_url":"https://api.github.com/users/chrisprice/orgs","repos_url":"https://api.github.com/users/chrisprice/repos","events_url":"https://api.github.com/users/chrisprice/events{/privacy}","received_events_url":"https://api.github.com/users/chrisprice/received_events","type":"User","site_admin":false},"created_at":"2015-09-15T21:28:23Z","updated_at":"2015-09-15T21:28:23Z","body":"Which container the series constructs?\n\nOn Tue, 15 Sep 2015 17:02 Colin Eberhardt <notifications@github.com> wrote:\n\n> A common use-case is to add multiple series to a chart and then apply\n> styles to each of them. Currently this requires the use of decorate:\n>\n> var macdLine = fc.series.line()\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).macd; });\n>\n> var signalLine = fc.series.line()\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).signal; });\n>\n> var divergenceBar = fc.series.line()\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).divergence; });\n>\n> var multiSeries = fc.series.multi()\n>     .series([divergenceBar, macdLine, signalLine])\n>     .decorate(function(g, data, index) {\n>         g.enter()\n>             .attr('class', function(d, i) {\n>                 return 'multi ' + ['divergence', 'macd', 'signal'][i];\n>             });\n>         decorate(g, data, index);\n>     });\n>\n> With the above code adding classes to the multi-containers.\n>\n> I think the above code is a little complex when all the user wants to do\n> is style each series. How about we add a 'classed' property to each series:\n>\n> var macdLine = fc.series.line()\n>     .classed('macd')\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).macd; });\n>\n> var signalLine = fc.series.line()\n>     .classed('signal')\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).signal; });\n>\n> var divergenceBar = fc.series.bar()\n>     .classed('divergence')\n>     .xValue(xValue)\n>     .yValue(function(d, i) { return root(d).divergence; });\n>\n> var multiSeries = fc.series.multi()\n>     .series([divergenceBar, macdLine, signalLine]);\n>\n> This would add the given class to each of the containers the series\n> constructs, rather than applying it to the multi- containers.\n>\n> —\n> Reply to this email directly or view it on GitHub\n> <https://github.com/ScottLogic/d3fc/issues/555>.\n>\n"}}