title: How set edge color with an different object in cytoscape js
body: <p>I have an object like this:</p>
  
  <p>edge</p>
  
  <pre><code>...,{\"data\":{\"label\":\"test\",\"source\":\"1\",\"target\":\"19\",\"extra\": 
  {\"color\":\"#000000\",\"width\":\"#000000\"}}},{\"data\":
  {\"label\":\"1~20\",\"source\":\"1\",\"target\":\"20\",\"extra\":
  {\"color\":\"#FF0000\",\"width\":\"5\"}}},...
  </code></pre>
  
  <p>I am able to parse it, read it and display my nodes and edges into <code>cytoscape.js</code>, but I cannot figure out how to access the extra components to set color and width.</p>
  
  <p>Here:</p>
  
  <pre class="lang-cs prettyprint-override"><code>.selector("edge")
                      .css({
                          "width": "mapData(weight, 0, 100, 1, 4)",
                          "target-arrow-shape": "triangle",
                          "source-arrow-shape": "circle",
                          "line-color": "data.extra(color)"//data(color)
                      })
  </code></pre>
  
  <p>I know how to acess the color property if it's outside extra, but I would like to use it inside the extra component, as one can see in the <strong>JSON</strong> example.</p>
  
  <p>Please, how should I access my extra components to set the css color?</p>
  
  <p>Any help is appreciated.</p>